/* Reversible compact-density overrides. The original visual language stays in styles.css. */

html[data-density="compact"] {
  --compact-body-size: 16.5px;
  --compact-ui-size: 13px;
  --compact-control-height: 40px;
  --compact-panel-pad: 16px;
  --compact-section-gap: 16px;
}

html[data-density="compact"] body {
  font-size: var(--compact-body-size);
  line-height: 1.5;
}

html[data-density="compact"] button,
html[data-density="compact"] input,
html[data-density="compact"] select,
html[data-density="compact"] textarea {
  font-size: 14px;
}

html[data-density="compact"] input,
html[data-density="compact"] select {
  min-height: var(--compact-control-height);
}

html[data-density="compact"] button {
  min-height: 38px;
}

html[data-density="compact"] .codex-navbar {
  gap: 18px;
  min-height: 70px;
  padding: 0 28px;
}

html[data-density="compact"] .codex-navbar::before {
  inset: 4px 14px;
}

html[data-density="compact"] .brand {
  gap: 9px;
}

html[data-density="compact"] .brand-mark {
  --brand-icon-size: 36px;
}

html[data-density="compact"] .brand-text {
  font-size: clamp(12px, 0.82vw, 14px);
  max-width: 180px;
}

html[data-density="compact"] .codex-navbar .main-nav {
  align-content: center;
  gap: 0;
}

html[data-density="compact"] .codex-navbar .main-nav a {
  font-size: 12.5px;
  min-height: 34px;
  padding: 0 clamp(8px, 0.8vw, 13px);
}

html[data-density="compact"] .codex-navbar .main-nav a::after {
  bottom: 2px;
}

html[data-density="compact"] .codex-navbar .nav-dropdown {
  max-height: min(70vh, 560px);
  min-width: 215px;
  overflow-y: auto;
  padding: 8px;
}

html[data-density="compact"] .codex-navbar .nav-dropdown button {
  font-size: 13.5px;
  min-height: 36px;
  padding: 7px 10px;
}

html[data-density="compact"] .nav-search input {
  font-size: 12px;
  height: 38px;
  padding-left: 36px;
  width: 112px;
}

html[data-density="compact"] .nav-search input:focus {
  width: 220px;
}

html[data-density="compact"] .nav-search::before {
  font-size: 18px;
  left: 12px;
}

html[data-density="compact"] .site-search-group-title {
  font-size: 11px;
}

html[data-density="compact"] .site-search-result {
  gap: 3px;
  padding: 9px 12px;
}

html[data-density="compact"] .site-search-result span {
  font-size: 15px;
}

html[data-density="compact"] .site-search-result small {
  font-size: 12px;
}

html[data-density="compact"] .hero-shell,
html[data-density="compact"] .hero-content {
  min-height: var(--hero-height, 250px);
}

html[data-density="compact"] .hero-content {
  max-width: min(1100px, calc(100vw - 48px));
  padding: 34px clamp(24px, 4vw, 52px);
}

html[data-density="compact"] .hero-content h1 {
  width: max-content;
  max-width: 100%;
  font-size: var(--hero-title-size, 38px);
  letter-spacing: 0.045em;
  overflow-wrap: anywhere;
}

html[data-density="compact"] #heroSubtitle {
  font-size: 18px;
  margin-top: 12px;
}

html[data-density="compact"] .hero-actions {
  gap: 8px;
  margin-top: 23px;
}

html[data-density="compact"] .hero-btn {
  font-size: calc(13px * var(--hero-button-scale, 0.85));
  min-height: calc(42px * var(--hero-button-scale, 0.85));
  min-width: calc(150px * var(--hero-button-scale, 0.85));
  padding: 0 calc(14px * var(--hero-button-scale, 0.85));
}

html[data-density="compact"] .page-shell {
  padding: 28px clamp(18px, 3vw, 40px) 44px;
}

html[data-density="compact"] .home-top-panels {
  gap: 11px;
  margin-bottom: 12px;
}

html[data-density="compact"] .home-info-panel,
html[data-density="compact"] .player-lookup-panel,
html[data-density="compact"] .world-status-panel,
html[data-density="compact"] .chaos-status-panel {
  min-height: 90px;
  padding: 5px 8px;
}

html[data-density="compact"] .home-info-panel,
html[data-density="compact"] .player-lookup-panel,
html[data-density="compact"] .world-status-panel,
html[data-density="compact"] .world-status-online,
html[data-density="compact"] .chaos-status-panel {
  gap: 4px;
}

html[data-density="compact"] .home-info-heading,
html[data-density="compact"] .player-lookup-heading,
html[data-density="compact"] .world-status-heading,
html[data-density="compact"] .chaos-status-heading {
  align-items: center;
  min-height: 24px;
  padding-bottom: 3px;
}

html[data-density="compact"] .home-info-panel .eyebrow,
html[data-density="compact"] .player-lookup-panel .eyebrow,
html[data-density="compact"] .world-status-panel .eyebrow,
html[data-density="compact"] .chaos-status-panel .eyebrow {
  font-size: 12px;
}

html[data-density="compact"] .home-info-panel #homeInfoText {
  gap: 2px;
}

html[data-density="compact"] .home-info-panel #homeInfoText span {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.15;
}

html[data-density="compact"] .player-lookup-form {
  gap: 5px;
}

html[data-density="compact"] .player-lookup-form label span {
  font-size: 11.5px;
}

html[data-density="compact"] .player-lookup-form input,
html[data-density="compact"] .player-lookup-form button {
  font-size: 13px;
  height: 32px;
  min-height: 32px;
}

html[data-density="compact"] .player-lookup-form button {
  padding-inline: 13px;
}

html[data-density="compact"] .player-online-panel {
  min-height: 48px;
  padding: 4px 7px;
}

html[data-density="compact"] .player-online-panel strong {
  font-size: 30px;
}

html[data-density="compact"] .player-online-panel span {
  font-size: 11.5px;
}

html[data-density="compact"] .chaos-tracker {
  min-height: 48px;
  padding: 1px 42px 1px 7px;
}

html[data-density="compact"] .chaos-tracker-emblem {
  height: 32px;
  width: 32px;
}

html[data-density="compact"] .chaos-tracker-copy {
  gap: 1px;
}

html[data-density="compact"] .chaos-tracker-copy small {
  font-size: 14px;
  line-height: 1.12;
}

html[data-density="compact"] .chaos-tracker-schedule,
html[data-density="compact"] .chaos-tracker-summon {
  font-size: 12px;
  line-height: 1.1;
}

html[data-density="compact"] .chaos-tracker-summon {
  padding: 1px 5px 2px;
}

html[data-density="compact"] .chaos-tracker-refresh {
  position: relative;
  font-size: 14px;
  height: 20px;
  min-height: 20px;
  width: 20px;
}

html[data-density="compact"] .chaos-tracker-refresh::before {
  position: absolute;
  inset: -2px;
  content: "";
}

html[data-density="compact"] .codex-category-grid {
  gap: 15px;
  margin-bottom: 26px;
}

html[data-density="compact"] .category-card {
  min-height: 120px;
  padding: 16px 18px;
}

html[data-density="compact"] .category-card-head {
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
}

html[data-density="compact"] .category-icon {
  height: 38px;
  width: 38px;
}

html[data-density="compact"] .category-card strong {
  font-size: clamp(17px, 1.35vw, 21px);
}

html[data-density="compact"] .category-links {
  gap: 1px;
  margin: 11px 0 0 50px;
}

html[data-density="compact"] .category-links button {
  font-size: clamp(15px, 1.1vw, 17px);
  min-height: 23px;
}

html[data-density="compact"] #ratingView .rating-table th,
html[data-density="compact"] #ratingView .rating-table td,
html[data-density="compact"] #onlineView .rating-table th,
html[data-density="compact"] #onlineView .rating-table td {
  padding: 7px 12px;
}

html[data-density="compact"] #ratingView .rating-player-link,
html[data-density="compact"] #onlineView .rating-player-link {
  min-height: 0;
}

html[data-density="compact"] .content-stage {
  font-size: 16.5px;
}

html[data-density="compact"] .content-stage h1,
html[data-density="compact"] #pageTitle {
  font-size: clamp(32px, 3.4vw, 46px);
}

html[data-density="compact"] .content-stage h2 {
  font-size: clamp(25px, 2.5vw, 32px);
}

html[data-density="compact"] .content-stage h3 {
  font-size: clamp(20px, 2vw, 24px);
}

html[data-density="compact"] .article-body,
html[data-density="compact"] .article-full,
html[data-density="compact"] .guide-layout,
html[data-density="compact"] .map-showcase {
  font-size: 16.5px;
  line-height: 1.55;
}

html[data-density="compact"] .article-full,
html[data-density="compact"] .article-card,
html[data-density="compact"] .guide-card,
html[data-density="compact"] .map-card {
  padding: clamp(14px, 2vw, 24px);
}

html[data-density="compact"] .toolbar,
html[data-density="compact"] .subgroup-tabs,
html[data-density="compact"] .filter-bar,
html[data-density="compact"] .market-toolbar,
html[data-density="compact"] .game-market-controls,
html[data-density="compact"] .rating-controls,
html[data-density="compact"] .online-controls {
  gap: 10px;
}

html[data-density="compact"] .toolbar label,
html[data-density="compact"] .filter-bar label,
html[data-density="compact"] .market-toolbar label,
html[data-density="compact"] .game-market-controls label,
html[data-density="compact"] .rating-controls label,
html[data-density="compact"] .online-controls label {
  font-size: 13px;
}

html[data-density="compact"] .subgroup-tabs button,
html[data-density="compact"] .filter-bar button,
html[data-density="compact"] .market-toolbar button,
html[data-density="compact"] .game-market-controls button,
html[data-density="compact"] .rating-controls button,
html[data-density="compact"] .online-controls button {
  font-size: 13px;
  min-height: 38px;
  padding: 7px 12px;
}

html[data-density="compact"] .market-page,
html[data-density="compact"] .game-market-page,
html[data-density="compact"] .rating-page,
html[data-density="compact"] .online-page,
html[data-density="compact"] .set-compare-page,
html[data-density="compact"] .bugs-page {
  font-size: 16px;
}

html[data-density="compact"] .market-item-card,
html[data-density="compact"] .market-list-item,
html[data-density="compact"] .rating-card,
html[data-density="compact"] .online-player-card {
  padding: 12px 14px;
}

@media (max-width: 1220px) {
  html[data-density="compact"] .codex-navbar {
    gap: 12px;
    padding-inline: 18px;
  }

  html[data-density="compact"] .brand-text {
    max-width: 130px;
  }

  html[data-density="compact"] .codex-navbar .main-nav a {
    font-size: 12px;
    padding-inline: 7px;
  }
}

@media (max-width: 1040px) {
  html[data-density="compact"] .codex-navbar {
    min-height: 64px;
    padding: 7px 12px !important;
  }

  html[data-density="compact"] .codex-navbar .main-nav a {
    font-size: 13px;
    min-height: 44px;
    padding: 8px 11px;
  }

  html[data-density="compact"] .codex-navbar .nav-dropdown button {
    font-size: 13px;
    min-height: 44px;
  }

  html[data-density="compact"] .nav-search input,
  html[data-density="compact"] .nav-search input:focus {
    height: 44px;
    width: 100%;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  html[data-density="compact"] .hero-content {
    padding-inline: 12px;
  }

  html[data-density="compact"] .hero-content h1 {
    letter-spacing: 0.02em;
  }

  html[data-density="compact"] .hero-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  html[data-density="compact"] body {
    font-size: 16px;
  }

  html[data-density="compact"] .brand-mark {
    --brand-icon-size: 38px;
  }

  html[data-density="compact"] .brand-text {
    font-size: 11px;
  }

  html[data-density="compact"] .hero-shell,
  html[data-density="compact"] .hero-content {
    min-height: max(var(--hero-height, 250px), 330px);
  }

  html[data-density="compact"] .hero-content {
    padding: 30px 20px;
  }

  html[data-density="compact"] .hero-content h1 {
    width: auto;
    font-size: min(var(--hero-title-size, 38px), clamp(28px, 8.2vw, 34px));
  }

  html[data-density="compact"] #heroSubtitle {
    font-size: 17px;
  }

  html[data-density="compact"] .hero-actions {
    gap: 7px;
    margin-top: 20px;
  }

  html[data-density="compact"] .hero-btn {
    min-height: 44px;
  }

  html[data-density="compact"] .page-shell {
    padding: 18px 8px 32px;
  }

  html[data-density="compact"] .home-info-panel,
  html[data-density="compact"] .player-lookup-panel,
  html[data-density="compact"] .world-status-panel,
  html[data-density="compact"] .chaos-status-panel,
  html[data-density="compact"] .category-card,
  html[data-density="compact"] .article-full,
  html[data-density="compact"] .article-card,
  html[data-density="compact"] .guide-card,
  html[data-density="compact"] .map-card {
    padding: 12px;
  }

  html[data-density="compact"] .category-card {
    min-height: 132px;
  }

  html[data-density="compact"] .content-stage h1,
  html[data-density="compact"] #pageTitle {
    font-size: clamp(29px, 9vw, 38px);
  }

  html[data-density="compact"] .content-stage h2 {
    font-size: clamp(23px, 7vw, 30px);
  }
}

@media (pointer: coarse), (any-pointer: coarse) {
  html[data-density="compact"] button,
  html[data-density="compact"] input,
  html[data-density="compact"] select,
  html[data-density="compact"] .hero-btn {
    min-height: 44px;
  }

  html[data-density="compact"] .chaos-tracker-refresh {
    height: 44px;
    min-height: 44px;
    width: 44px;
  }

  html[data-density="compact"] #ratingView .rating-player-link,
  html[data-density="compact"] #onlineView .rating-player-link {
    min-height: 44px;
  }
}

/* Administration keeps its current structure while using the same compact rhythm. */
html[data-density="compact"] .home-hero-layout-controls output {
  color: #6d241d;
  font-family: var(--aaa-ui);
  font-size: 12px;
  font-weight: 900;
}

html[data-density="compact"] .home-hero-preview {
  display: grid;
  min-height: calc(var(--hero-height, 250px) * 0.5);
  align-content: center;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(201, 164, 93, 0.46);
  background: linear-gradient(90deg, #18130f, #332416);
}

html[data-density="compact"] .home-hero-preview [data-home-hero-preview-title] {
  max-width: 100%;
  color: #f8e8c5;
  font-family: var(--aaa-title);
  font-size: calc(var(--hero-title-size, 38px) * 0.65);
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

html[data-density="compact"] .home-hero-preview [data-home-hero-preview-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html[data-density="compact"] .home-hero-preview button {
  min-height: calc(42px * var(--hero-button-scale, 0.85) * 0.75);
  padding-inline: calc(14px * var(--hero-button-scale, 0.85));
  font-size: calc(13px * var(--hero-button-scale, 0.85) * 0.85);
}

html[data-density="compact"] .admin-content {
  --admin-font: 14px;
  font-size: 14px;
  line-height: 1.4;
  margin-top: -8px;
}

html[data-density="compact"] .admin-workspace {
  background:
    linear-gradient(90deg, rgba(28, 22, 17, 0.96) 0 210px, rgba(237, 221, 184, 0.48) 210px),
    var(--paper);
  font-size: 14px;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: calc(100vh - 82px);
}

html[data-density="compact"] .admin-content.sidebar-collapsed .admin-workspace {
  background: var(--paper);
  grid-template-columns: minmax(0, 1fr);
}

html[data-density="compact"] .admin-sidebar {
  gap: 8px;
  min-height: calc(100vh - 82px);
  padding: 9px 8px;
}

html[data-density="compact"] .admin-sidebar-brand {
  gap: 6px;
  grid-template-columns: 30px minmax(0, 1fr) 26px;
  padding-bottom: 7px;
}

html[data-density="compact"] .admin-sidebar-mark {
  height: 30px;
  width: 30px;
}

html[data-density="compact"] .admin-sidebar-toggle {
  height: 26px;
  min-height: 26px;
  width: 26px;
}

html[data-density="compact"] .admin-sidebar-brand strong {
  font-size: 12.5px;
}

html[data-density="compact"] .admin-sidebar-brand small,
html[data-density="compact"] .admin-session span {
  font-size: 11px;
}

html[data-density="compact"] .admin-sidebar .admin-session {
  gap: 5px;
  padding: 6px;
}

html[data-density="compact"] .admin-sidebar .admin-session .ghost-btn {
  font-size: 12px;
  min-height: 32px;
  padding: 5px 7px;
}

html[data-density="compact"] .admin-tabs {
  gap: 4px;
}

html[data-density="compact"] .admin-tabs button {
  font-size: 12.5px;
  min-height: 32px;
  padding: 6px 8px;
}

html[data-density="compact"] .admin-main {
  padding: 9px;
}

html[data-density="compact"] .admin-topbar {
  gap: 9px;
  margin-bottom: 8px;
  padding: 7px 9px;
}

html[data-density="compact"] .admin-topbar h2 {
  font-size: 16px;
}

html[data-density="compact"] .admin-topbar span {
  font-size: 12px;
}

html[data-density="compact"] .admin-topbar-actions {
  gap: 6px;
}

html[data-density="compact"] .admin-stats {
  padding: 5px 8px;
}

html[data-density="compact"] .admin-sidebar-context {
  gap: 5px;
  padding-top: 6px;
}

html[data-density="compact"] .admin-sidebar-context-details,
html[data-density="compact"] .admin-sidebar-list {
  gap: 4px;
}

html[data-density="compact"] .admin-sidebar-context-title {
  font-size: 10.5px;
}

html[data-density="compact"] .admin-sidebar-search {
  font-size: 12px;
  min-height: 34px;
  padding: 6px 7px;
}

html[data-density="compact"] .admin-sidebar-entry {
  gap: 1px;
  min-height: 0;
  padding: 5px 7px;
}

html[data-density="compact"] .admin-sidebar-entry strong {
  font-size: 12px;
}

html[data-density="compact"] .admin-sidebar-entry span,
html[data-density="compact"] .admin-sidebar-note {
  font-size: 10.5px;
}

html[data-density="compact"] .admin-grid,
html[data-density="compact"] .quest-admin-grid,
html[data-density="compact"] .map-admin-grid,
html[data-density="compact"] .menu-admin-grid {
  gap: 9px;
}

html[data-density="compact"] .admin-form,
html[data-density="compact"] .admin-list,
html[data-density="compact"] .admin-preview,
html[data-density="compact"] .import-panel {
  padding: 9px;
}

html[data-density="compact"] .admin-form {
  gap: 7px;
  font-size: 14px;
}

html[data-density="compact"] .admin-form h1 {
  font-size: clamp(25px, 2.4vw, 30px);
}

html[data-density="compact"] .admin-form h2,
html[data-density="compact"] .admin-list h2,
html[data-density="compact"] .admin-preview h2,
html[data-density="compact"] .import-panel h2 {
  font-size: clamp(20px, 2vw, 25px);
}

html[data-density="compact"] .admin-form h3,
html[data-density="compact"] .admin-list h3,
html[data-density="compact"] .admin-preview h3 {
  font-size: clamp(16px, 1.5vw, 19px);
}

html[data-density="compact"] .admin-form label {
  gap: 4px;
  font-size: 13px;
}

html[data-density="compact"] .admin-form input,
html[data-density="compact"] .admin-form select {
  font-size: 14px;
  min-height: 38px;
  padding: 6px 8px;
}

html[data-density="compact"] .admin-form textarea,
html[data-density="compact"] .rich-field {
  font-size: 14.5px;
  line-height: 1.45;
  padding: 8px 10px;
}

html[data-density="compact"] .rich-field {
  min-height: 112px;
}

html[data-density="compact"] .form-row {
  gap: 9px;
  grid-template-columns: 1fr 165px;
}

html[data-density="compact"] .article-meta-row {
  gap: 6px;
  grid-template-columns: minmax(240px, 1.6fr) minmax(135px, 0.75fr) minmax(135px, 0.75fr) 135px minmax(170px, 0.8fr);
}

html[data-density="compact"] .article-meta-row label {
  font-size: 11.5px;
}

html[data-density="compact"] .form-head,
html[data-density="compact"] .form-actions,
html[data-density="compact"] .form-head-actions {
  gap: 6px;
}

html[data-density="compact"] .action-btn,
html[data-density="compact"] .ghost-btn,
html[data-density="compact"] .tool-btn,
html[data-density="compact"] .map-tools button,
html[data-density="compact"] .guide-tabs button {
  font-size: 12px;
  min-height: 36px;
  padding: 6px 10px;
}

html[data-density="compact"] .editor-toolbar {
  gap: 5px;
  padding: 5px;
}

html[data-density="compact"] .tool-btn,
html[data-density="compact"] .block-controls button {
  font-size: 12px;
  min-height: 30px;
  padding: 4px 7px;
}

html[data-density="compact"] .template-picker,
html[data-density="compact"] .template-picker select,
html[data-density="compact"] .bulk-card-insert,
html[data-density="compact"] .bulk-card-insert summary {
  font-size: 11px;
  min-height: 32px;
}

html[data-density="compact"] .block-editor {
  gap: 6px;
  grid-template-columns: 175px minmax(0, 1fr);
}

html[data-density="compact"] .editor-outline-panel {
  gap: 7px;
  padding: 6px;
}

html[data-density="compact"] .admin-entry,
html[data-density="compact"] .card-catalog-row,
html[data-density="compact"] .quest-catalog-row,
html[data-density="compact"] .bug-admin-summary {
  font-size: 12.5px;
  padding: 6px 7px;
}

html[data-density="compact"] .content-table,
html[data-density="compact"] .database-table,
html[data-density="compact"] .analytics-table {
  font-size: 12.5px;
}

html[data-density="compact"] .content-table th,
html[data-density="compact"] .content-table td,
html[data-density="compact"] .database-table th,
html[data-density="compact"] .database-table td,
html[data-density="compact"] .analytics-table th,
html[data-density="compact"] .analytics-table td {
  padding: 5px 7px;
}

html[data-density="compact"] .quick-actions {
  bottom: 16px;
  gap: 6px;
  right: 16px;
}

html[data-density="compact"] .quick-action-btn {
  font-size: 11px;
  min-height: 38px;
  padding: 0 10px;
}

html[data-density="compact"] .scroll-top-btn {
  width: 38px;
}

@media (max-width: 1120px) {
  html[data-density="compact"] .admin-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-density="compact"] .block-editor {
    grid-template-areas:
      "outline"
      "toolbar"
      "blocks";
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-density="compact"] .admin-sidebar {
    min-height: 0;
    position: static;
  }

  html[data-density="compact"] .admin-main {
    padding: 8px;
  }

  html[data-density="compact"] .article-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  html[data-density="compact"] .admin-content {
    font-size: 14px;
  }

  html[data-density="compact"] .admin-main {
    padding: 6px;
  }

  html[data-density="compact"] .admin-topbar {
    align-items: flex-start;
    padding: 7px;
  }

  html[data-density="compact"] .admin-grid,
  html[data-density="compact"] .quest-admin-grid,
  html[data-density="compact"] .map-admin-grid,
  html[data-density="compact"] .menu-admin-grid,
  html[data-density="compact"] .form-row,
  html[data-density="compact"] .article-meta-row,
  html[data-density="compact"] .block-editor,
  html[data-density="compact"] .bug-admin-edit {
    grid-template-columns: 1fr;
  }

  html[data-density="compact"] .editor-outline-panel {
    max-height: 260px;
    position: static;
  }

  html[data-density="compact"] .admin-form,
  html[data-density="compact"] .admin-list,
  html[data-density="compact"] .admin-preview,
  html[data-density="compact"] .import-panel {
    padding: 8px;
  }
}

@media (pointer: coarse) {
  html[data-density="compact"] .admin-sidebar-brand {
    grid-template-columns: 30px minmax(0, 1fr) 44px;
  }

  html[data-density="compact"] .admin-sidebar-toggle {
    height: 44px;
    min-height: 44px;
    width: 44px;
  }

  html[data-density="compact"] .admin-tabs button,
  html[data-density="compact"] .admin-sidebar-search,
  html[data-density="compact"] .admin-sidebar-entry,
  html[data-density="compact"] .admin-form input,
  html[data-density="compact"] .admin-form select,
  html[data-density="compact"] .action-btn,
  html[data-density="compact"] .ghost-btn,
  html[data-density="compact"] .tool-btn,
  html[data-density="compact"] .map-tools button,
  html[data-density="compact"] .guide-tabs button,
  html[data-density="compact"] .block-controls button,
  html[data-density="compact"] .template-picker,
  html[data-density="compact"] .template-picker select,
  html[data-density="compact"] .bulk-card-insert,
  html[data-density="compact"] .bulk-card-insert summary,
  html[data-density="compact"] .quick-action-btn {
    min-height: 44px;
  }

  html[data-density="compact"] .scroll-top-btn {
    width: 44px;
  }
}

/* Mobile navigation shell. Desktop keeps the existing three-column header. */
.mobile-header-actions,
.mobile-drawer {
  display: contents;
}

.mobile-search-toggle,
.mobile-drawer-head,
.mobile-nav-backdrop,
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1040px) {
  .mobile-header-actions {
    position: relative;
    z-index: 2;
    display: flex;
    justify-self: end;
    gap: 6px;
  }
}

@media (max-width: 720px) {
  html[data-density="compact"] body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  html[data-density="compact"] body.mobile-admin-route {
    padding-bottom: 0;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  html[data-density="compact"] .codex-navbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 62px;
    padding: 7px 10px !important;
  }

  html[data-density="compact"] .brand-mark {
    --brand-icon-size: 36px;
  }

  html[data-density="compact"] .brand-text {
    max-width: min(52vw, 230px);
    font-size: clamp(10px, 2.8vw, 12px);
    white-space: nowrap;
  }

  .mobile-search-toggle {
    display: grid;
    place-items: center;
    color: var(--aaa-gold-bright);
    font: 700 25px/1 var(--aaa-title);
  }

  .mobile-header-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(201, 164, 93, 0.5);
    background: rgba(8, 7, 6, 0.34);
    cursor: pointer;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 202;
    display: flex;
    width: min(88vw, 360px);
    height: 100dvh;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px calc(18px + env(safe-area-inset-bottom));
    border-left: 1px solid rgba(201, 164, 93, 0.62);
    visibility: hidden;
    background:
      linear-gradient(180deg, rgba(39, 29, 23, 0.99), rgba(16, 13, 11, 0.995)),
      #120f0d;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.48);
    transform: translateX(102%);
    transition: transform 220ms ease, visibility 220ms step-end;
  }

  .mobile-nav-open .mobile-drawer {
    visibility: visible;
    transform: translateX(0);
    transition: transform 220ms ease, visibility 0s;
  }

  .mobile-drawer-head {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 10px 8px;
    border-bottom: 1px solid rgba(201, 164, 93, 0.3);
    color: #f5dfb1;
    font-family: var(--aaa-title);
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .mobile-drawer-head button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(201, 164, 93, 0.42);
    color: var(--aaa-gold-bright);
    background: rgba(8, 7, 6, 0.34);
    font-size: 27px;
    cursor: pointer;
  }

  html[data-density="compact"] .mobile-drawer .main-nav,
  html[data-density="compact"] .mobile-drawer .nav-search {
    position: static !important;
    display: grid !important;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
  }

  html[data-density="compact"] .mobile-drawer .main-nav {
    flex: 1 1 auto;
    align-content: start;
    grid-template-columns: 1fr;
    gap: 3px;
    overflow-y: auto;
    padding: 0 2px;
  }

  html[data-density="compact"] .mobile-drawer .nav-search {
    flex: 0 0 auto;
    padding: 8px 2px 0;
    border-top: 1px solid rgba(201, 164, 93, 0.3);
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 201;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(5, 4, 3, 0.66);
    transition: opacity 180ms ease, visibility 180ms step-end;
  }

  .mobile-nav-open .mobile-nav-backdrop {
    visibility: visible;
    opacity: 1;
    transition: opacity 180ms ease, visibility 0s;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 180;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px 6px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(201, 164, 93, 0.62);
    background: rgba(20, 16, 13, 0.97);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(14px);
  }

  .mobile-bottom-nav a {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 52px;
    place-content: center;
    gap: 1px;
    color: rgba(245, 230, 200, 0.68);
    text-align: center;
    text-decoration: none;
  }

  .mobile-bottom-nav a span {
    color: rgba(214, 185, 122, 0.78);
    font-size: 19px;
    line-height: 1;
  }

  .mobile-bottom-nav a small {
    font: 700 10px/1.1 var(--aaa-ui);
    letter-spacing: 0.035em;
  }

  .mobile-bottom-nav a.active {
    color: #fff0ca;
    background: linear-gradient(180deg, rgba(201, 164, 93, 0.12), transparent);
  }

  .mobile-bottom-nav a.active::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 22%;
    left: 22%;
    height: 2px;
    background: var(--aaa-gold-bright);
    box-shadow: 0 0 9px rgba(214, 185, 122, 0.65);
  }

  .mobile-admin-route .mobile-bottom-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-nav-backdrop {
    transition: none !important;
  }
}

/* Mobile home: compact, but keeps the engraved Sacralium visual language. */
@media (max-width: 720px) {
  html[data-density="compact"] .hero-shell,
  html[data-density="compact"] .hero-content {
    min-height: clamp(230px, var(--hero-height, 250px), 250px);
  }

  html[data-density="compact"] .hero-content {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 22px 18px;
  }

  html[data-density="compact"] .hero-content h1 {
    max-width: min(100%, 340px);
    margin: 0;
    font-size: min(var(--hero-title-size, 38px), clamp(27px, 8.2vw, 32px));
    letter-spacing: 0.025em;
    line-height: 1.02;
  }

  html[data-density="compact"] #heroSubtitle {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.2;
  }

  html[data-density="compact"] .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: min(100%, 430px);
    margin-top: 14px;
  }

  html[data-density="compact"] .hero-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 7px;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.1;
    white-space: normal;
  }

  html[data-density="compact"] .home-top-panels,
  html[data-density="compact"] .home-top-panels > *,
  html[data-density="compact"] .player-lookup-form,
  html[data-density="compact"] .player-lookup-form label {
    min-width: 0;
  }

  html[data-density="compact"] .home-top-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-density="compact"] .home-top-panels p,
  html[data-density="compact"] .home-top-panels span,
  html[data-density="compact"] .home-top-panels strong {
    overflow-wrap: anywhere;
  }

  html[data-density="compact"] .category-card {
    min-height: 0;
    padding: 16px;
  }

  html[data-density="compact"] .category-card-head {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  html[data-density="compact"] .category-icon {
    width: 36px;
    height: 36px;
  }

  html[data-density="compact"] .category-links {
    gap: 0;
    margin: 8px 0 0 46px;
  }

  html[data-density="compact"] .category-links button {
    min-width: 0;
    min-height: 28px;
    padding-block: 2px;
    overflow-wrap: anywhere;
  }
}

.online-mobile-controls,
.mobile-player-cards {
  display: none;
}

@media (max-width: 720px) {
  html[data-density="compact"] #onlineView .rating-page {
    min-width: 0;
    padding: 12px;
  }

  html[data-density="compact"] #onlineView .rating-heading {
    align-items: flex-start;
    gap: 10px;
  }

  html[data-density="compact"] #onlineView .rating-heading > div {
    min-width: 0;
  }

  html[data-density="compact"] #onlineView .rating-heading h2,
  html[data-density="compact"] #onlineView .rating-heading p {
    overflow-wrap: anywhere;
  }

  html[data-density="compact"] #onlineLocatorRefresh {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 12px;
  }

  html[data-density="compact"] #onlineView .rating-table-wrap {
    display: none;
  }

  .online-mobile-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(112px, 0.65fr);
    gap: 8px;
    margin: 10px 0;
  }

  .online-mobile-controls label {
    display: grid;
    min-width: 0;
    gap: 4px;
    color: #793028;
    font-family: var(--aaa-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  html[data-density="compact"] .online-mobile-controls input,
  html[data-density="compact"] .online-mobile-controls select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid rgba(105, 78, 45, 0.42);
    background: rgba(255, 251, 231, 0.72);
    font-size: 14px;
  }

  .mobile-player-cards {
    display: grid;
    gap: 9px;
  }

  .mobile-player-card,
  .mobile-player-state {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(105, 78, 45, 0.34);
    background:
      linear-gradient(135deg, rgba(255, 252, 232, 0.84), rgba(224, 202, 149, 0.26)),
      var(--paper);
    box-shadow: inset 0 0 0 1px rgba(255, 250, 222, 0.5), 0 3px 9px rgba(49, 35, 23, 0.1);
  }

  .mobile-player-card-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(121, 48, 40, 0.18);
  }

  html[data-density="compact"] .mobile-player-card .rating-player-link {
    min-width: 0;
    min-height: 44px;
    padding: 5px 0;
    overflow-wrap: anywhere;
    font-size: 18px;
    text-align: left;
  }

  .mobile-online-indicator {
    flex: 0 0 auto;
    color: #2f773a;
    font-family: var(--aaa-ui);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-online-indicator::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #46c75b;
    box-shadow: 0 0 7px rgba(70, 199, 91, 0.8);
  }

  .mobile-player-location {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 9px 0;
  }

  .mobile-player-location strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .mobile-player-location small {
    flex: 0 0 auto;
    color: #6d5a45;
    font-size: 12px;
  }

  .mobile-player-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }

  .mobile-player-stats div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
    padding: 7px 8px;
    border: 1px solid rgba(105, 78, 45, 0.18);
    background: rgba(255, 250, 226, 0.5);
  }

  .mobile-player-stats dt,
  .mobile-player-stats dd {
    margin: 0;
  }

  .mobile-player-stats dt {
    color: #765f47;
    font: 700 11px/1.1 var(--aaa-ui);
  }

  .mobile-player-stats dd {
    color: #35281e;
    font: 800 15px/1.1 var(--aaa-title);
  }

  .mobile-player-state {
    color: #6a5541;
    line-height: 1.35;
    text-align: center;
  }
}

/* === Armory desktop refinement · 2026-09-04 ===
   Keeps the main Sacralium visual language from styles.css intact.
   Only improves desktop workspace behavior and prevents equipment cards
   from becoming excessively wide on large screens. Item quality backgrounds
   remain unchanged. Mobile keeps the existing layout. */
@media (min-width: 981px) {
  #armoryView .armory-editor {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 28px);
    overflow: auto;
    scrollbar-width: thin;
  }

  #armoryView .armory-slot-wrap {
    position: relative;
  }

  #armoryView .armory-quick-item-controls {
    position: absolute;
    z-index: 8;
    right: 5px;
    bottom: 5px;
    left: 5px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(97, 69, 37, 0.28);
    border-radius: 3px;
    background: rgba(244, 229, 193, 0.97);
    box-shadow: 0 7px 18px rgba(76, 52, 29, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
  }

  #armoryView .armory-slot-wrap:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) .armory-quick-item-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  #armoryView .armory-quick-item-controls button {
    min-height: 30px;
    padding: 2px 3px;
    border: 1px solid rgba(97, 69, 37, 0.2);
    background: rgba(255, 248, 225, 0.86);
  }

  #armoryView .armory-quick-item-controls button:hover:not(:disabled) {
    border-color: var(--accent);
    background: #fff3cd;
  }
}

@media (min-width: 1321px) {
  #armoryView .armory-doll:not(.armory-figure-hidden) {
    width: min(100%, 1180px);
    margin: 12px auto 0;
    grid-template-columns: minmax(220px, 300px) minmax(320px, 1fr) minmax(220px, 300px);
    justify-content: center;
  }

  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    width: min(100%, 620px);
    margin: 12px auto 0;
    grid-template-columns: repeat(2, minmax(220px, 300px));
    justify-content: center;
  }
}

/* === Armory desktop compactness pass · 2026-09-04 v3 ===
   Keep the native Sacralium palette and quality backgrounds, but restore
   normal page flow (no sticky editor over later sections) and reduce visual
   scale/vertical padding across the builder, picker and result panels. */
@media (min-width: 981px) {
  /* The item editor must stay in normal document flow. A sticky editor looked
     convenient, but visually covered the full-width result sections below. */
  #armoryView .armory-editor {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    align-self: start;
    gap: 10px;
  }

  /* Top navigation / import controls: same site styling, less empty height. */
  #armoryView .armory-tabs {
    gap: 7px;
  }

  #armoryView .armory-tabs button {
    flex-basis: 205px;
    min-height: 40px;
    padding: 7px 14px;
    font-size: 0.94rem;
  }

  #armoryView .armory-tabs button small {
    min-width: 20px;
    min-height: 20px;
    margin-left: 5px;
    font-size: 0.74rem;
  }

  #armoryView .armory-mode-actions > .armory-actions {
    min-height: 54px;
    padding: 8px 10px;
  }

  #armoryView .armory-import-field {
    gap: 2px;
    font-size: 0.82rem;
  }

  #armoryView .armory-import-field input,
  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    min-height: 36px;
  }

  #armoryView .armory-import-field input {
    padding: 6px 9px;
    font-size: 0.88rem;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  /* One compact visual rhythm for collapsible Armory sections. */
  #armoryView .armory-build-library > summary,
  #armoryView .armory-compare > details > summary,
  #armoryView .armory-workbench > details > summary,
  #armoryView .armory-manual-builder > details > summary,
  #armoryView .armory-picker-section > summary,
  #armoryView .armory-appearance-field details > summary,
  #armoryView .armory-buff-picker > summary,
  #armoryView .armory-stat-details > summary {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 42px;
    padding: 6px 9px;
    font-size: 0.92rem;
    box-shadow: 0 2px 7px rgba(76, 52, 29, 0.055);
  }

  #armoryView .armory-build-library > summary::before,
  #armoryView .armory-compare > details > summary::before,
  #armoryView .armory-workbench > details > summary::before,
  #armoryView .armory-manual-builder > details > summary::before,
  #armoryView .armory-picker-section > summary::before,
  #armoryView .armory-appearance-field details > summary::before,
  #armoryView .armory-buff-picker > summary::before,
  #armoryView .armory-stat-details > summary::before {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  #armoryView .armory-build-library > summary small,
  #armoryView .armory-workbench > details > summary small,
  #armoryView .armory-manual-builder > details > summary small,
  #armoryView .armory-picker-section > summary small,
  #armoryView .armory-appearance-field details > summary small,
  #armoryView .armory-buff-picker > summary small,
  #armoryView .armory-stat-details > summary small {
    font-size: 0.76rem;
  }

  /* Characteristic/mastery allocation: keep all controls, but make every row
     horizontal and considerably denser on desktop. */
  #armoryView .armory-manual-content {
    gap: 7px;
    padding: 0 10px 10px;
  }

  #armoryView .armory-manual-toolbar {
    gap: 6px;
    padding: 6px 7px;
  }

  #armoryView .armory-manual-mode {
    padding: 4px 7px;
    font-size: 0.7rem;
  }

  #armoryView .armory-manual-controls {
    gap: 5px;
  }

  #armoryView .armory-manual-controls label,
  #armoryView .armory-manual-glory {
    gap: 2px;
    font-size: 0.78rem;
  }

  #armoryView .armory-manual-controls input,
  #armoryView .armory-manual-controls select,
  #armoryView .armory-manual-glory strong {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 0.86rem;
  }

  #armoryView .armory-manual-stats {
    gap: 5px;
  }

  #armoryView .armory-manual-stat {
    grid-template-columns: minmax(78px, 0.72fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
  }

  #armoryView .armory-manual-stat > span strong {
    font-size: 0.82rem;
  }

  #armoryView .armory-manual-stat > span small {
    margin-top: 1px;
    font-size: 0.68rem;
    line-height: 1.15;
  }

  #armoryView .armory-manual-stat > div {
    grid-template-columns: 28px minmax(40px, 1fr) 28px minmax(44px, auto);
    gap: 4px;
  }

  #armoryView .armory-manual-stat button,
  #armoryView .armory-manual-stat input[type="number"],
  #armoryView .armory-manual-total {
    min-height: 29px;
    font-size: 0.88rem;
  }

  #armoryView .armory-manual-stat button {
    font-size: 1rem;
  }

  #armoryView .armory-manual-total {
    padding: 3px 6px;
  }

  #armoryView .armory-manual-mastery {
    gap: 5px;
  }

  #armoryView .armory-allocation-section > header h3 {
    font-size: 0.88rem;
  }

  #armoryView .armory-allocation-section > header small {
    font-size: 0.68rem;
  }

  #armoryView .armory-manual-requirements {
    gap: 7px;
    padding: 6px 8px;
  }

  #armoryView .armory-manual-requirements strong {
    font-size: 0.8rem;
  }

  #armoryView .armory-manual-requirements small {
    font-size: 0.76rem;
    line-height: 1.25;
  }

  /* Item picker: compact controls/cards and local scrolling only for results. */
  #armoryView .armory-picker-body {
    gap: 9px;
    margin-top: 8px;
  }

  #armoryView .armory-filter-bar {
    gap: 6px;
  }

  #armoryView .armory-filter-bar label,
  #armoryView .armory-editor-head label {
    gap: 2px;
    font-size: 0.8rem;
  }

  #armoryView .armory-filter-bar select,
  #armoryView .armory-filter-bar button,
  #armoryView .armory-editor-head input {
    min-height: 36px;
    padding: 5px 8px;
    font-size: 0.84rem;
  }

  #armoryView .armory-set-actions {
    gap: 7px;
  }

  #armoryView .armory-set-action-group {
    gap: 4px;
    padding: 4px;
  }

  #armoryView .armory-set-action-group button {
    min-height: 36px;
    padding: 5px 7px;
    font-size: 0.8rem;
  }

  #armoryView .armory-catalog {
    gap: 7px;
    max-height: 470px;
  }

  #armoryView .armory-catalog-entry .armory-catalog-card {
    padding-right: 32px;
  }

  #armoryView .armory-catalog-card {
    gap: 7px;
    min-height: 70px;
    padding: 6px;
  }

  #armoryView .armory-catalog-card img {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  #armoryView .armory-catalog-card strong {
    font-size: 0.88rem;
  }

  #armoryView .armory-catalog-card small,
  #armoryView .armory-custom-field small {
    font-size: 0.76rem;
  }

  #armoryView .armory-catalog-card .armory-requirement-line.compact {
    font-size: 0.7rem !important;
    line-height: 1.2;
  }

  #armoryView .armory-favorite-toggle {
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    font-size: 0.95rem;
  }

  /* Buffs/skills are supporting information, not the main canvas. */
  #armoryView .armory-active-buffs {
    margin-top: 10px;
    padding: 9px;
  }

  #armoryView .armory-buffs-heading {
    gap: 8px;
    margin-bottom: 7px;
  }

  #armoryView .armory-buffs-heading h4 {
    font-size: 0.9rem;
  }

  #armoryView .armory-buffs-heading > span {
    padding: 3px 6px;
    font-size: 0.68rem;
  }

  #armoryView .armory-buffs-grid {
    gap: 6px;
  }

  #armoryView .armory-buff-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px;
    min-height: 64px;
    padding: 6px 7px;
  }

  #armoryView .armory-buff-icon {
    width: 42px;
    height: 46px;
    font-size: 1.05rem;
  }

  #armoryView .armory-buff-body > span {
    font-size: 0.64rem;
  }

  #armoryView .armory-buff-body strong {
    font-size: 0.84rem;
  }

  #armoryView .armory-buff-body small {
    font-size: 0.68rem;
    line-height: 1.18;
  }

  /* Result dashboard: retain the same hierarchy, with less oversized type and
     less vertical whitespace. */
  #armoryView .armory-summary {
    padding: 12px;
  }

  #armoryView .armory-summary > h3 {
    font-size: 1.34rem;
  }

  #armoryView .armory-build-overview {
    gap: 6px;
    margin-top: 9px;
  }

  #armoryView .armory-build-overview span {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 0.88rem;
  }

  #armoryView .armory-build-overview b {
    font-size: 0.98rem;
  }

  #armoryView .armory-build-overview .armory-overview-player small {
    font-size: 0.76rem;
  }

  #armoryView .armory-build-overview .armory-overview-damage b {
    font-size: 1.08rem;
  }

  #armoryView .armory-set-bonus {
    gap: 7px;
    margin-top: 9px;
    padding: 9px 11px;
  }

  #armoryView .armory-set-bonus h4 {
    font-size: 0.96rem;
  }

  #armoryView .armory-set-bonus > p {
    font-size: 0.8rem;
    line-height: 1.28;
  }

  #armoryView .armory-set-bonus-stats {
    gap: 5px;
  }

  #armoryView .armory-set-bonus-stats > span {
    padding: 6px 8px;
  }

  #armoryView .armory-set-bonus-stats small {
    font-size: 0.78rem;
  }

  #armoryView .armory-set-bonus-stats strong {
    font-size: 0.9rem;
  }

  #armoryView .armory-key-dashboard {
    gap: 10px;
    margin-top: 12px;
  }

  #armoryView .armory-key-card-head {
    gap: 10px;
    min-height: 48px;
    padding: 8px 11px;
  }

  #armoryView .armory-key-card-head p {
    font-size: 0.7rem;
  }

  #armoryView .armory-key-card-head h4 {
    font-size: 1.12rem;
  }

  #armoryView .armory-key-card-head > strong,
  #armoryView .armory-key-hero-value > strong {
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  }

  #armoryView .armory-key-stat-list {
    padding: 4px 9px 8px;
  }

  #armoryView .armory-key-stat-list > div {
    min-height: 48px;
    padding: 7px 5px;
    gap: 9px;
  }

  #armoryView .armory-key-stat-list > div:nth-child(odd) {
    padding-right: 10px;
  }

  #armoryView .armory-key-stat-list > div:nth-child(even) {
    padding-left: 10px;
  }

  #armoryView .armory-key-stat-list .armory-stat-name,
  #armoryView .armory-stat-name {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  #armoryView .armory-key-stat-list .armory-stat-name > small,
  #armoryView .armory-stat-name > small {
    margin-top: 3px;
    font-size: 0.74rem;
    line-height: 1.25;
  }

  #armoryView .armory-key-stat-list > div > strong,
  #armoryView .armory-stat-list strong {
    font-size: 1rem;
  }

  #armoryView .armory-key-stat-list strong small,
  #armoryView .armory-stat-list strong small {
    font-size: 0.74rem;
  }

  #armoryView .armory-key-subhead {
    margin-top: 5px;
    padding: 7px 0 5px;
    font-size: 0.88rem;
  }

  #armoryView .armory-armor-zones {
    gap: 5px;
    padding: 9px 10px 4px;
  }

  #armoryView .armory-armor-zones span {
    padding: 6px 4px;
  }

  #armoryView .armory-armor-zones small {
    font-size: 0.72rem;
  }

  #armoryView .armory-armor-zones b {
    font-size: 1.05rem;
  }

  #armoryView .armory-key-card-defense h5 {
    margin-top: 7px;
    font-size: 0.74rem;
  }

  #armoryView .armory-stat-details {
    margin-top: 12px;
  }

  #armoryView .armory-stat-details .armory-stat-groups {
    margin: 8px;
  }

  #armoryView .armory-stat-group {
    padding: 6px;
  }

  #armoryView .armory-stat-group h4 {
    padding: 7px 8px;
    font-size: 0.88rem;
  }

  #armoryView .armory-stat-list > div {
    min-height: 42px;
    padding: 7px 4px;
    gap: 10px;
  }

  #armoryView .armory-info-button {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}

/* === Armory allocation cards · 2026-09-04 v4 ===
   Desktop-only refinement requested after the compactness pass:
   three compact cards in one row — progression, characteristics, mastery.
   No calculation or item-quality styling changes. */
@media (min-width: 1180px) {
  #armoryView .armory-manual-content {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(360px, 1.12fr) minmax(390px, 1.16fr);
    align-items: stretch;
    gap: 9px;
    padding: 9px 10px 10px;
  }

  #armoryView .armory-manual-toolbar,
  #armoryView .armory-allocation-section {
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(92, 67, 39, 0.22);
    background: rgba(255, 248, 226, 0.66);
    box-shadow: 0 2px 8px rgba(76, 52, 29, 0.045);
  }

  /* Card 1: only imported/new state + level, glory and remort. */
  #armoryView .armory-manual-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    padding: 8px 9px;
  }

  #armoryView .armory-manual-mode {
    width: max-content;
    max-width: 100%;
    margin: 0 0 2px;
    padding: 2px 6px;
    font-size: 0.62rem;
    line-height: 1.25;
  }

  #armoryView .armory-manual-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    width: 100%;
  }

  #armoryView .armory-manual-controls label,
  #armoryView .armory-manual-glory {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 72px;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin: 0;
    padding: 2px 0;
    border-bottom: 1px solid rgba(92, 67, 39, 0.11);
    font-size: 0.72rem;
    line-height: 1.2;
  }

  #armoryView .armory-manual-controls label:last-child {
    border-bottom: 0;
  }

  #armoryView .armory-manual-glory small {
    font-size: inherit;
  }

  #armoryView .armory-manual-controls input,
  #armoryView .armory-manual-controls select,
  #armoryView .armory-manual-glory strong {
    width: 72px;
    min-width: 72px;
    min-height: 27px;
    height: 27px;
    margin: 0;
    padding: 2px 6px;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
  }

  #armoryView .armory-manual-glory strong {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(92, 67, 39, 0.18);
    background: rgba(239, 220, 178, 0.46);
  }

  /* Free-point values remain available in the parent section summary.
     Hiding these large pool tiles keeps the first card purely progression. */
  #armoryView .armory-manual-toolbar > .armory-manual-pool {
    display: none;
  }

  /* Cards 2 and 3: small header + row list, not large tiles. */
  #armoryView .armory-allocation-section {
    display: flex;
    flex-direction: column;
    padding: 7px 8px 8px;
  }

  #armoryView .armory-allocation-section > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    margin: 0 0 3px;
    padding: 0 2px 5px;
    border-bottom: 1px solid rgba(92, 67, 39, 0.14);
  }

  #armoryView .armory-allocation-section > header h3 {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  #armoryView .armory-allocation-section > header small {
    max-width: 56%;
    font-size: 0.58rem;
    line-height: 1.15;
    text-align: right;
    opacity: 0.66;
  }

  #armoryView .armory-manual-stats,
  #armoryView .armory-manual-mastery-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #armoryView .armory-manual-stat {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    margin: 0;
    padding: 3px 2px;
    border: 0;
    border-bottom: 1px solid rgba(92, 67, 39, 0.105);
    background: transparent;
    box-shadow: none;
  }

  #armoryView .armory-manual-stat:last-child {
    border-bottom: 0;
  }

  #armoryView .armory-manual-stat > span {
    min-width: 0;
  }

  #armoryView .armory-manual-stat > span strong {
    display: block;
    overflow: hidden;
    font-size: 0.71rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #armoryView .armory-manual-stat > span small {
    display: block;
    margin-top: 1px;
    font-size: 0.56rem;
    line-height: 1.1;
    opacity: 0.68;
  }

  #armoryView .armory-manual-stat > div {
    display: grid;
    grid-template-columns: 25px 54px 25px 48px;
    align-items: center;
    gap: 3px;
  }

  #armoryView .armory-manual-mastery .armory-manual-stat > div {
    grid-template-columns: 25px 54px 25px;
  }

  #armoryView .armory-manual-stat button,
  #armoryView .armory-manual-stat input[type="number"],
  #armoryView .armory-manual-total {
    min-width: 0;
    min-height: 25px;
    height: 25px;
    margin: 0;
    padding: 1px 4px;
    font-size: 0.72rem;
    line-height: 1;
  }

  #armoryView .armory-manual-stat button {
    width: 25px;
    padding: 0;
    font-size: 0.9rem;
  }

  #armoryView .armory-manual-stat input[type="number"] {
    width: 54px;
    text-align: center;
    appearance: textfield;
  }

  #armoryView .armory-manual-stat input[type="number"]::-webkit-inner-spin-button,
  #armoryView .armory-manual-stat input[type="number"]::-webkit-outer-spin-button,
  #armoryView .armory-manual-controls input[type="number"]::-webkit-inner-spin-button,
  #armoryView .armory-manual-controls input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  #armoryView .armory-manual-total {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding-inline: 4px;
    font-weight: 700;
  }

  #armoryView .armory-manual-requirements {
    grid-column: 1 / -1;
    min-height: 30px;
    margin: 0;
    padding: 5px 8px;
  }

  #armoryView .armory-manual-requirements strong {
    font-size: 0.72rem;
  }

  #armoryView .armory-manual-requirements small {
    font-size: 0.66rem;
  }
}

@media (min-width: 981px) and (max-width: 1179px) {
  /* Preserve the compact v3 layout where three cards would be too narrow. */
  #armoryView .armory-manual-toolbar > .armory-manual-pool {
    display: grid;
  }
}

/* === Armory progression + buff polish · 2026-09-04 v5 ===
   Keeps the three equal-height desktop cards, moves free-point context into
   the progression card, uses the same +/- language for remort, and turns
   active-effect descriptions into hover/focus tooltips. */
@media (min-width: 1180px) {
  #armoryView .armory-manual-builder > details > summary {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  #armoryView .armory-manual-toolbar {
    justify-content: flex-start;
  }

  #armoryView .armory-manual-controls label,
  #armoryView .armory-manual-glory {
    grid-template-columns: minmax(72px, 1fr) auto;
  }

  #armoryView .armory-manual-remort-stepper {
    display: grid;
    grid-template-columns: 25px 54px 25px;
    align-items: center;
    gap: 3px;
  }

  #armoryView .armory-manual-remort-stepper button,
  #armoryView .armory-manual-remort-stepper input {
    min-width: 0;
    min-height: 25px;
    height: 25px;
    margin: 0;
    padding: 1px 4px;
    font-size: 0.72rem;
    line-height: 1;
  }

  #armoryView .armory-manual-remort-stepper button {
    width: 25px;
    padding: 0;
    font-size: 0.9rem;
  }

  #armoryView .armory-manual-remort-stepper input {
    width: 54px;
    text-align: center;
    appearance: textfield;
  }

  #armoryView .armory-manual-remort-stepper input::-webkit-inner-spin-button,
  #armoryView .armory-manual-remort-stepper input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  #armoryView .armory-manual-toolbar > .armory-manual-pool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "meta meta";
    gap: 1px 8px;
    min-height: 38px;
    margin: 0;
    padding: 5px 6px;
    border: 1px solid rgba(92, 67, 39, 0.14);
    background: rgba(239, 220, 178, 0.24);
    box-shadow: none;
  }

  #armoryView .armory-manual-toolbar > .armory-manual-pool:not(.armory-mastery-pool) {
    margin-top: auto;
  }

  #armoryView .armory-manual-toolbar > .armory-manual-pool > span {
    grid-area: label;
    align-self: center;
    font-size: 0.64rem;
    font-weight: 800;
  }

  #armoryView .armory-manual-toolbar > .armory-manual-pool > strong {
    grid-area: value;
    align-self: center;
    font-size: 0.86rem;
    line-height: 1;
  }

  #armoryView .armory-manual-toolbar > .armory-manual-pool > small {
    grid-area: meta;
    font-size: 0.56rem;
    line-height: 1.1;
    opacity: 0.7;
  }
}

@media (min-width: 981px) {
  #armoryView .armory-buff-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
    min-height: 50px;
    padding: 5px 30px 5px 6px;
    outline: none;
  }

  #armoryView .armory-buff-card:focus-visible {
    box-shadow: 0 0 0 2px rgba(126, 55, 42, 0.2);
  }

  #armoryView .armory-buff-icon {
    width: 36px;
    height: 40px;
  }

  #armoryView .armory-buff-body {
    align-content: center;
    gap: 1px;
  }

  #armoryView .armory-buff-body > span {
    font-size: 0.58rem;
    line-height: 1.05;
  }

  #armoryView .armory-buff-body strong {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  #armoryView .armory-buff-card time {
    right: 6px;
    bottom: 4px;
    font-size: 0.6rem;
  }

  #armoryView .armory-buff-remove {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.86rem;
  }

  #armoryView .armory-buff-tooltip {
    position: absolute;
    left: 7px;
    bottom: calc(100% + 5px);
    z-index: 30;
    width: max-content;
    max-width: min(360px, calc(100vw - 48px));
    padding: 6px 8px;
    border: 1px solid rgba(92, 67, 39, 0.28);
    background: rgba(255, 249, 229, 0.98);
    box-shadow: 0 8px 20px rgba(76, 52, 29, 0.16);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  }

  #armoryView .armory-buff-card:hover .armory-buff-tooltip,
  #armoryView .armory-buff-card:focus .armory-buff-tooltip,
  #armoryView .armory-buff-card:focus-within .armory-buff-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Armory lighter desktop shell · 2026-09-04 v6 ===
   Keep the native Sacralium visual language while reducing the amount of
   chrome above the actual dressing workspace. No mobile or item-quality
   styling changes. */
@media (min-width: 981px) {
  #armoryView .armory-page {
    gap: 8px;
  }

  /* Compact page identity: keep the section recognizable without spending
     a large part of the viewport on a hero-like title/description block. */
  #armoryView .armory-heading {
    align-items: center;
    min-height: 32px;
    padding: 0 2px;
  }

  #armoryView .armory-heading .eyebrow,
  #armoryView .armory-heading p:not(.eyebrow) {
    display: none;
  }

  #armoryView .armory-heading h2 {
    font-size: 1.18rem;
    line-height: 1.15;
  }

  /* Tabs should read as mode selectors, not four hero buttons. */
  #armoryView .armory-tabs {
    width: max-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(76, 52, 29, 0.055);
  }

  #armoryView .armory-tabs button {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.76rem;
  }

  #armoryView .armory-tabs button small {
    min-width: 17px;
    min-height: 17px;
    margin-left: 4px;
    font-size: 0.62rem;
  }

  /* Import / mode actions stay in one slim toolbar. The field label is
     already obvious from its placeholder and the selected Import tab. */
  #armoryView .armory-mode-actions > .armory-actions {
    min-height: 42px;
    gap: 5px;
    padding: 5px 7px;
  }

  #armoryView .armory-import-field {
    display: block;
    flex: 0 0 min(300px, 28vw);
    font-size: 0;
  }

  #armoryView .armory-import-field input {
    width: 100%;
    min-height: 31px;
    height: 31px;
    padding: 4px 9px;
    font-size: 0.76rem;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    min-height: 31px;
    height: 31px;
    padding: 4px 9px;
    font-size: 0.68rem;
    line-height: 1;
  }

  /* Make the manual-allocation disclosure a light separator before the
     actual equipment workspace. */
  #armoryView .armory-manual-builder > details > summary {
    min-height: 36px;
    padding: 4px 7px;
    font-size: 0.78rem;
  }

  #armoryView .armory-manual-builder > details > summary::before {
    width: 22px;
    height: 22px;
    font-size: 0.92rem;
  }

  #armoryView .armory-layout {
    gap: 10px;
  }

  #armoryView .armory-loadout-head {
    min-height: 36px;
    margin-bottom: 3px;
  }

  #armoryView .armory-loadout-head h3 {
    font-size: 1.08rem;
  }

  #armoryView .armory-figure-toggle {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 0.68rem;
  }

  /* Active effects: keep cards glanceable; detailed effect text is supplied
     by the existing v5 hover/focus tooltip. */
  #armoryView .armory-active-buffs {
    padding: 8px;
  }

  #armoryView .armory-buffs-heading {
    margin-bottom: 5px;
  }

  #armoryView .armory-buffs-heading .eyebrow {
    font-size: 0.58rem;
  }

  #armoryView .armory-buffs-heading h4 {
    font-size: 0.82rem;
  }

  #armoryView .armory-buffs-grid {
    gap: 5px;
  }

  #armoryView .armory-buff-card {
    min-height: 46px;
    padding-block: 4px;
  }

  #armoryView .armory-buff-icon {
    width: 34px;
    height: 36px;
  }

  #armoryView .armory-buff-body strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1180px) {
  /* Remort must use the exact same square, parchment controls as stat rows.
     Earlier v5 only matched dimensions, so generic button styling still won. */
  #armoryView .armory-manual-remort-stepper button,
  #armoryView .armory-manual-remort-stepper input {
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-weight: 900;
  }

  #armoryView .armory-manual-remort-stepper button {
    border: 1px solid rgba(97, 69, 37, 0.3);
    background: rgba(255, 247, 219, 0.9);
    color: var(--accent);
    cursor: pointer;
  }

  #armoryView .armory-manual-remort-stepper button:hover:not(:disabled) {
    border-color: rgba(97, 69, 37, 0.45);
    background: rgba(255, 247, 219, 1);
  }

  #armoryView .armory-manual-remort-stepper button:disabled {
    opacity: 0.35;
    cursor: default;
  }

  #armoryView .armory-manual-remort-stepper input {
    border: 1px solid rgba(97, 69, 37, 0.28);
    background: rgba(255, 252, 239, 0.92);
    color: var(--ink);
  }
}

/* === Armory compact equipped items + rich hover card · 2026-09-04 v7 ===
   Desktop-only. Equipped slots become image-first tiles: item image, tier and
   runes only. Full item information moves to a hover/focus tooltip. */
@media (min-width: 981px) {
  #armoryView .armory-slot-column {
    gap: 5px;
  }

  #armoryView .armory-slot.filled {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-rows: 68px;
    min-height: 76px;
    padding: 4px 5px 4px 7px;
  }

  #armoryView .armory-slot.filled > img {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 68px;
    height: 68px;
  }

  #armoryView .armory-slot-meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-width: 44px;
    height: 68px;
    color: var(--ink);
  }

  #armoryView .armory-slot.filled .armory-slot-tier {
    display: grid;
    width: 42px;
    height: 21px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(77, 55, 34, 0.34);
    background: rgba(39, 35, 40, 0.9);
    color: #fff7dd;
    font-size: 0.66rem;
    line-height: 1;
  }

  #armoryView .armory-slot.filled .armory-rune-icons {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 44px;
    min-height: 0;
    margin: 0;
  }

  #armoryView .armory-slot.filled .armory-rune-icons i {
    width: 20px;
    height: 20px;
  }

  #armoryView .armory-slot.filled .armory-rune-icons img {
    width: 100%;
    height: 100%;
  }

  #armoryView .armory-slot.filled > .armory-slot-label,
  #armoryView .armory-slot.filled > strong,
  #armoryView .armory-slot.filled > .armory-requirement-line {
    display: none;
  }

  /* Rich item hover card. It intentionally overlays the character preview,
     not the rest of the page flow, and does not change slot click behavior. */
  #armoryView .armory-slot-tooltip {
    position: absolute;
    z-index: 40;
    top: 0;
    width: min(370px, 36vw);
    max-height: min(72vh, 560px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(84, 59, 35, 0.32);
    background: rgba(255, 250, 231, 0.985);
    color: var(--ink);
    box-shadow: 0 14px 36px rgba(55, 38, 24, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.12s ease, transform 0.12s ease;
  }

  #armoryView .armory-slot-wrap-left > .armory-slot-tooltip {
    left: calc(100% + 9px);
  }

  #armoryView .armory-slot-wrap-right > .armory-slot-tooltip {
    right: calc(100% + 9px);
  }

  #armoryView .armory-slot-wrap:hover > .armory-slot-tooltip,
  #armoryView .armory-slot-wrap:focus-within > .armory-slot-tooltip {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  #armoryView .armory-slot-tooltip > header {
    display: grid;
    gap: 2px;
    padding: 1px 2px 8px;
    border-bottom: 1px solid rgba(92, 67, 39, 0.18);
  }

  #armoryView .armory-slot-tooltip > header strong {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  #armoryView .armory-slot-tooltip > header small {
    color: var(--muted);
    font-size: 0.66rem;
  }

  #armoryView .armory-slot-tooltip-section {
    margin-top: 7px;
    padding: 7px 8px;
    border: 1px solid rgba(97, 69, 37, 0.16);
    background: rgba(255, 246, 217, 0.52);
  }

  #armoryView .armory-slot-tooltip-section h5 {
    margin: 0 0 5px;
    color: var(--accent);
    font-size: 0.68rem;
    line-height: 1.1;
    text-transform: uppercase;
  }

  #armoryView .armory-slot-tooltip-section ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #armoryView .armory-slot-tooltip-section li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;
    font-size: 0.69rem;
    line-height: 1.25;
  }

  #armoryView .armory-slot-tooltip-section li > span {
    min-width: 0;
    color: var(--muted);
  }

  #armoryView .armory-slot-tooltip-section li > strong {
    max-width: 215px;
    color: var(--ink);
    font-size: inherit;
    text-align: right;
    white-space: normal;
  }

  #armoryView .armory-slot-tooltip-section.requirements li.met > span {
    color: #3f6c38;
  }

  #armoryView .armory-slot-tooltip-section.requirements li.missing > span {
    color: #9b3b30;
  }

  #armoryView .armory-slot-tooltip-section.runes {
    border-left: 3px solid rgba(47, 151, 104, 0.7);
    background: rgba(229, 249, 239, 0.58);
  }

  #armoryView .armory-slot-tooltip-section.enchants {
    border-left: 3px solid rgba(205, 139, 37, 0.74);
    background: rgba(255, 247, 220, 0.72);
  }

  /* The quick quality/tier controls remain available on hover, but stay below
     the tooltip and do not affect the compact resting height. */
  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    z-index: 35;
  }
}

/* === Armory compact loadout + stat source popovers · 2026-09-04 v8 ===
   Desktop-only refinement: reduce the equipped-item/figure workspace width,
   remove dead space inside equipped slots, soften item imagery, and make the
   existing stat-source "i" dialog visually match the equipped-item tooltip.
   Item quality backgrounds and mobile layout are intentionally unchanged. */
@media (min-width: 981px) {
  /* The left equipment workspace should be a compact tool, not half the page.
     Give the item editor the extra width instead of enlarging the character. */
  #armoryView .armory-workbench-body {
    grid-template-columns: minmax(560px, 620px) minmax(0, 1fr);
  }

  #armoryView .armory-loadout {
    padding: 11px;
  }

  #armoryView .armory-doll:not(.armory-figure-hidden) {
    width: 100%;
    margin: 8px auto 0;
    grid-template-columns: 118px minmax(250px, 320px) 118px;
    justify-content: center;
    gap: 6px;
  }

  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    width: min(100%, 248px);
    margin: 8px auto 0;
    grid-template-columns: repeat(2, 118px);
    justify-content: center;
    gap: 6px;
  }

  #armoryView .armory-figure {
    min-height: 486px;
  }

  #armoryView .armory-figure-nav {
    width: 34px;
    height: 62px;
    font-size: 2.1rem;
  }

  #armoryView .armory-figure-nav-prev { left: 5px; }
  #armoryView .armory-figure-nav-next { right: 5px; }

  #armoryView .armory-appearance-info {
    gap: 2px;
    padding: 6px 8px 7px;
  }

  #armoryView .armory-appearance-info strong {
    font-size: 0.78rem;
  }

  #armoryView .armory-appearance-info small {
    font-size: 0.63rem;
  }

  #armoryView .armory-slot-column {
    gap: 5px;
  }

  /* A filled slot is now exactly image + a narrow metadata rail. There is no
     flexible middle column, so large monitors cannot create empty space. */
  #armoryView .armory-slot.filled {
    display: grid;
    grid-template-columns: 66px 38px;
    grid-template-rows: 66px;
    justify-content: start;
    column-gap: 4px;
    width: 100%;
    min-height: 74px;
    padding: 4px;
    border-radius: 7px;
  }

  #armoryView .armory-slot.filled > img {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 66px;
    height: 66px;
    border-radius: 9px;
    box-shadow:
      inset 0 0 12px rgba(255, 255, 255, 0.16),
      0 4px 10px rgba(60, 42, 28, 0.2);
  }

  #armoryView .armory-slot-meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 38px;
    min-width: 38px;
    height: 66px;
  }

  #armoryView .armory-slot.filled .armory-slot-tier {
    width: 38px;
    height: 20px;
    border-radius: 4px;
    font-size: 0.62rem;
  }

  #armoryView .armory-slot.filled .armory-rune-icons {
    display: grid;
    grid-template-columns: repeat(2, 18px);
    grid-auto-rows: 18px;
    align-content: start;
    justify-content: center;
    gap: 2px;
    width: 38px;
    margin: 0;
  }

  #armoryView .armory-slot.filled .armory-rune-icons i {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(60, 42, 28, 0.16);
  }

  /* Five quick-change actions would be unreadable inside a 118px slot.
     Keep them full-size as a small floating toolbar on hover/selection. */
  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    right: auto;
    left: 50%;
    width: 190px;
    bottom: 4px;
    grid-template-columns: repeat(5, 34px);
    justify-content: center;
    transform: translate(-50%, 3px);
  }

  #armoryView .armory-slot-wrap:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) .armory-quick-item-controls {
    transform: translate(-50%, 0);
  }

  #armoryView .armory-quick-item-controls button {
    min-height: 28px;
    padding-inline: 2px;
    font-size: 0.78rem;
  }

  #armoryView .armory-quick-item-controls button small {
    font-size: 0.48rem;
  }

  /* Keep the rich item tooltip comfortably readable despite narrower slots. */
  #armoryView .armory-slot-tooltip {
    width: min(360px, 34vw);
    border-radius: 10px;
  }

  #armoryView .armory-slot-wrap-left > .armory-slot-tooltip {
    left: calc(100% + 7px);
  }

  #armoryView .armory-slot-wrap-right > .armory-slot-tooltip {
    right: calc(100% + 7px);
  }

  /* The existing "i" source window behaves like the item tooltip: a local,
     light floating card with no dimmed full-screen backdrop. Click outside or
     Escape still closes it, so no interaction semantics are lost. */
  .armory-stat-source-overlay {
    background: transparent;
  }

  .armory-stat-source-popover {
    width: min(370px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    padding: 10px;
    border: 1px solid rgba(84, 59, 35, 0.32);
    border-radius: 10px;
    background: rgba(255, 250, 231, 0.985);
    box-shadow: 0 14px 36px rgba(55, 38, 24, 0.25);
  }

  .armory-stat-source-popover > header {
    position: static;
    grid-template-columns: minmax(0, 1fr) auto 26px;
    gap: 7px;
    padding: 1px 2px 8px;
    border-bottom: 1px solid rgba(92, 67, 39, 0.18);
    background: transparent;
  }

  .armory-stat-source-popover > header small {
    font-size: 0.59rem;
  }

  .armory-stat-source-popover > header strong {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .armory-stat-source-popover > header > b {
    font-size: 0.92rem;
  }

  .armory-stat-source-popover > header button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 247, 220, 0.72);
    font-size: 1rem;
  }

  .armory-stat-source-popover > div {
    gap: 5px;
    padding: 7px 0 0;
  }

  .armory-stat-source-entry {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 44px;
    padding: 5px 6px;
    border: 1px solid rgba(97, 69, 37, 0.16);
    border-radius: 7px;
    background: rgba(255, 246, 217, 0.52);
    box-shadow: none;
  }

  .armory-stat-source-entry img,
  .armory-stat-source-entry > i {
    width: 34px;
    height: 34px;
    border-radius: 6px;
  }

  .armory-stat-source-entry span small {
    font-size: 0.56rem;
  }

  .armory-stat-source-entry span strong,
  .armory-stat-source-entry > b {
    font-size: 0.69rem;
    line-height: 1.2;
  }

  .armory-stat-source-popover > footer {
    position: static;
    margin-top: 7px;
    padding: 7px 2px 0;
    border-top: 1px solid rgba(92, 67, 39, 0.18);
    background: transparent;
    font-size: 0.64rem;
  }

  .armory-stat-source-popover > footer b {
    font-size: 0.74rem;
  }
}

/* On medium desktop widths, preserve enough editor room while still avoiding
   the old oversized left workspace. */
@media (min-width: 981px) and (max-width: 1279px) {
  #armoryView .armory-workbench-body {
    grid-template-columns: minmax(520px, 0.9fr) minmax(480px, 1.1fr);
  }

  #armoryView .armory-doll:not(.armory-figure-hidden) {
    grid-template-columns: 112px minmax(230px, 1fr) 112px;
  }

  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    width: min(100%, 236px);
    grid-template-columns: repeat(2, 112px);
  }
}

/* === Armory quick-change popover · 2026-09-04 v9 ===
   Replace the five-button strip with a compact grouped control card. The
   underlying quick-change actions are unchanged; this is presentation only. */
@media (min-width: 981px) {
  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    top: 50%;
    bottom: auto;
    width: 148px;
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    border: 1px solid rgba(76, 52, 31, 0.3);
    border-radius: 9px;
    background: rgba(255, 249, 229, 0.985);
    box-shadow: 0 10px 26px rgba(55, 38, 24, 0.2);
  }

  #armoryView .armory-slot-wrap-left .armory-quick-item-controls {
    right: auto;
    left: calc(100% + 7px);
    transform: translate(3px, -50%) scale(0.985);
    transform-origin: left center;
  }

  #armoryView .armory-slot-wrap-right .armory-quick-item-controls {
    right: calc(100% + 7px);
    left: auto;
    transform: translate(-3px, -50%) scale(0.985);
    transform-origin: right center;
  }

  #armoryView .armory-slot-wrap-left:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:has(.armory-slot.active) .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:has(.armory-slot.active) .armory-quick-item-controls {
    transform: translate(0, -50%) scale(1);
  }

  #armoryView .armory-quick-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 2px 3px;
    border-radius: 6px;
  }

  #armoryView .armory-quick-control-row + .armory-quick-control-row {
    border-top: 1px solid rgba(92, 67, 39, 0.12);
    border-radius: 0 0 6px 6px;
  }

  #armoryView .armory-quick-control-row > span {
    color: rgba(60, 45, 31, 0.72);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
  }

  #armoryView .armory-quick-control-row > div {
    display: grid;
    grid-template-columns: repeat(2, 27px);
    gap: 3px;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button {
    width: 27px;
    min-width: 27px;
    height: 25px;
    min-height: 25px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 69, 38, 0.24);
    border-radius: 5px;
    background: rgba(255, 252, 239, 0.9);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(59, 42, 28, 0.07);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button:hover:not(:disabled) {
    border-color: rgba(145, 56, 45, 0.58);
    background: rgba(255, 241, 216, 0.98);
    color: var(--accent);
    box-shadow: 0 2px 5px rgba(94, 52, 32, 0.13);
    transform: translateY(-1px);
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button:disabled {
    opacity: 0.32;
    box-shadow: none;
  }

  #armoryView .armory-quick-control-variant > button.variant {
    width: 57px;
    min-width: 57px;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }

  /* While the pointer is on the editing controls, suppress the item tooltip so
     the two floating cards never fight for the same space. */
  #armoryView .armory-slot-wrap:has(.armory-quick-item-controls:hover) > .armory-slot-tooltip {
    opacity: 0;
    pointer-events: none;
  }

  /* The selected item gets a lighter accent instead of the old heavy black box. */
  #armoryView .armory-slot.active {
    outline: 2px solid rgba(112, 71, 39, 0.62);
    outline-offset: -1px;
    box-shadow: 0 5px 12px rgba(62, 43, 29, 0.16);
  }
}

/* === Armory static per-slot quick controls · 2026-09-04 v10 ===
   Keep quick quality/version/tier actions permanently beside each equipped
   slot on the figure-facing edge, matching the compact visual language. */
@media (min-width: 981px) {
  #armoryView .armory-slot-wrap.has-quick-controls {
    z-index: 3;
  }

  #armoryView .armory-slot-wrap.has-quick-controls:hover,
  #armoryView .armory-slot-wrap.has-quick-controls:focus-within,
  #armoryView .armory-slot-wrap.has-quick-controls:has(.armory-slot.active) {
    z-index: 60;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    top: 50%;
    bottom: auto;
    width: 58px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  /* The rail always sits between the equipment column and the character. */
  #armoryView .armory-slot-wrap-left .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:has(.armory-slot.active) .armory-quick-item-controls {
    right: auto;
    left: calc(100% + 5px);
    transform: translateY(-50%);
  }

  #armoryView .armory-slot-wrap-right .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:has(.armory-slot.active) .armory-quick-item-controls {
    right: calc(100% + 5px);
    left: auto;
    transform: translateY(-50%);
  }

  #armoryView .armory-quick-control-row {
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #armoryView .armory-quick-control-row + .armory-quick-control-row {
    border-top: 0;
    border-radius: 0;
  }

  /* Titles remain available through native title/aria labels; visible text is
     deliberately removed so the rail stays icon-sized like the reference UI. */
  #armoryView .armory-quick-control-row > span {
    display: none;
  }

  #armoryView .armory-quick-control-row > div {
    display: grid;
    grid-template-columns: repeat(2, 27px);
    gap: 4px;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button {
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(96, 69, 38, 0.28);
    border-radius: 7px;
    background: rgba(255, 250, 232, 0.96);
    color: var(--ink);
    box-shadow: 0 2px 5px rgba(59, 42, 28, 0.11);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button:hover:not(:disabled) {
    border-color: rgba(145, 56, 45, 0.62);
    background: rgba(255, 241, 216, 0.99);
    color: var(--accent);
    box-shadow: 0 4px 9px rgba(94, 52, 32, 0.17);
    transform: translateY(-1px);
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button:disabled {
    opacity: 0.28;
    background: rgba(248, 242, 223, 0.72);
    box-shadow: none;
  }

  #armoryView .armory-quick-control-variant > button.variant {
    width: 58px;
    min-width: 58px;
    height: 27px;
    min-height: 27px;
    font-size: 0.58rem;
    letter-spacing: 0.01em;
  }

  /* The rich item card starts after the permanent control rail instead of
     competing for the same strip of space. */
  #armoryView .armory-slot-wrap-left > .armory-slot-tooltip {
    left: calc(100% + 70px);
  }

  #armoryView .armory-slot-wrap-right > .armory-slot-tooltip {
    right: calc(100% + 70px);
  }
}

/* === Armory fitted slot controls + overlaid tier · 2026-09-04 v11 ===
   Keep the permanent quality/version/tier rail between each equipment slot and
   the character, but fit the entire rail inside the slot height. Move rune
   icons below the item image and place the compact tier badge on the image. */
@media (min-width: 981px) {
  /* Reserve a deliberate lane between each item column and the character for
     the permanent controls. The figure itself does not grow. */
  #armoryView .armory-doll:not(.armory-figure-hidden) {
    grid-template-columns: 72px minmax(250px, 320px) 72px;
    column-gap: 52px;
  }

  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    width: min(100%, 196px);
    grid-template-columns: repeat(2, 72px);
    column-gap: 52px;
  }

  #armoryView .armory-slot-column {
    gap: 5px;
  }

  /* Item tile: image first, runes directly underneath. */
  #armoryView .armory-slot.filled {
    position: relative;
    display: grid;
    grid-template-columns: 60px;
    grid-template-rows: 60px 18px;
    justify-content: center;
    align-content: start;
    row-gap: 3px;
    width: 72px;
    min-width: 72px;
    min-height: 87px;
    padding: 4px 5px 5px;
    border-radius: 9px;
  }

  #armoryView .armory-slot.filled > img {
    grid-column: 1;
    grid-row: 1;
    width: 60px;
    height: 60px;
    border-radius: 10px;
  }

  /* Let tier/runes participate directly in the slot grid. */
  #armoryView .armory-slot-meta {
    display: contents;
  }

  /* Tier becomes a small badge over the item's top-right corner. */
  #armoryView .armory-slot.filled .armory-slot-tier {
    position: absolute;
    z-index: 3;
    top: 7px;
    right: 7px;
    width: 25px;
    height: 17px;
    min-width: 25px;
    padding: 0 3px;
    border: 1px solid rgba(255, 246, 220, 0.38);
    border-radius: 5px;
    background: rgba(38, 34, 38, 0.9);
    color: #fff7dd;
    box-shadow: 0 2px 5px rgba(44, 31, 25, 0.22);
    font-size: 0.53rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
  }

  /* Runes sit under the item image instead of consuming a side column. */
  #armoryView .armory-slot.filled .armory-rune-icons {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    width: 60px;
    min-width: 0;
    min-height: 18px;
    margin: 0;
    gap: 2px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  #armoryView .armory-slot.filled .armory-rune-icons i {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 4px;
  }

  /* A single fitted rail: it is always shorter than the 87px equipment tile. */
  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    top: 50%;
    bottom: auto;
    width: 49px;
    height: auto;
    max-height: 74px;
    padding: 3px;
    gap: 2px;
    border: 1px solid rgba(92, 65, 38, 0.23);
    border-radius: 9px;
    background: rgba(255, 249, 229, 0.92);
    box-shadow: 0 3px 9px rgba(58, 40, 27, 0.12);
    backdrop-filter: blur(2px);
  }

  #armoryView .armory-slot-wrap-left .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-left:has(.armory-slot.active) .armory-quick-item-controls {
    left: calc(100% + 3px);
    right: auto;
    transform: translateY(-50%);
  }

  #armoryView .armory-slot-wrap-right .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:hover .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:focus-within .armory-quick-item-controls,
  #armoryView .armory-slot-wrap-right:has(.armory-slot.active) .armory-quick-item-controls {
    right: calc(100% + 3px);
    left: auto;
    transform: translateY(-50%);
  }

  #armoryView .armory-quick-control-row,
  #armoryView .armory-quick-control-row + .armory-quick-control-row {
    min-height: 0;
    padding: 0;
    gap: 0;
    border: 0;
    background: transparent;
  }

  #armoryView .armory-quick-control-row > div {
    display: grid;
    grid-template-columns: repeat(2, 20px);
    gap: 3px;
    justify-content: center;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 6px;
    font-size: 0.7rem;
    box-shadow: 0 1px 3px rgba(59, 42, 28, 0.1);
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button:hover:not(:disabled) {
    transform: none;
    box-shadow: 0 2px 5px rgba(94, 52, 32, 0.14);
  }

  #armoryView .armory-quick-control-variant > button.variant {
    width: 43px;
    min-width: 43px;
    height: 20px;
    min-height: 20px;
    font-size: 0.5rem;
    letter-spacing: 0;
  }

  /* The tooltip still opens into the figure area, now after the slimmer rail. */
  #armoryView .armory-slot-wrap-left > .armory-slot-tooltip {
    left: calc(100% + 58px);
  }

  #armoryView .armory-slot-wrap-right > .armory-slot-tooltip {
    right: calc(100% + 58px);
  }
}

/* === Armory larger equipped-item artwork · 2026-09-04 v12 ===
   Increase only the equipped item artwork while keeping the character figure
   and the fitted permanent controls compact. */
@media (min-width: 981px) {
  #armoryView .armory-doll:not(.armory-figure-hidden) {
    grid-template-columns: 82px minmax(250px, 320px) 82px;
  }

  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    width: min(100%, 216px);
    grid-template-columns: repeat(2, 82px);
  }

  #armoryView .armory-slot.filled {
    grid-template-columns: 70px;
    grid-template-rows: 70px 20px;
    width: 82px;
    min-width: 82px;
    min-height: 99px;
    padding: 4px 5px 5px;
  }

  #armoryView .armory-slot.filled > img {
    width: 70px;
    height: 70px;
    border-radius: 11px;
  }

  #armoryView .armory-slot.filled .armory-rune-icons {
    width: 70px;
    min-height: 20px;
  }

  #armoryView .armory-slot.filled .armory-rune-icons i {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  #armoryView .armory-slot.filled .armory-slot-tier {
    top: 6px;
    right: 6px;
  }
}


/* === Armory curated appearance artwork · 2026-09-04 v13 ===
   ch1..ch21 in assets/ava/avatar/armory are pre-sized and pre-positioned on
   their transparent canvases. Render that full canvas centered instead of
   reapplying legacy per-appearance X/Y/height calibration. */
@media (min-width: 981px) {
  #armoryView .armory-figure-stage.armory-figure-stage-curated {
    display: grid;
    place-items: center;
    padding: 2.5%;
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
  }
}

/* === Armory curated appearance zoom + tighter stage · 2026-09-04 v14 ===
   The dedicated ch1..ch21 PNGs are already centered by the artwork itself.
   Zoom the whole prepared canvas around its center so the hero reads larger,
   while keeping the equipment columns and mobile layout unchanged. */
@media (min-width: 981px) {
  #armoryView .armory-figure:has(.armory-figure-stage-curated) {
    align-self: center;
    height: 560px;
    min-height: 560px;
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated {
    overflow: hidden;
    padding: 0;
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transform: scale(var(--armory-curated-zoom, 1.24));
    transform-origin: 50% 50%;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
  }

  #armoryView .armory-figure:has(.armory-figure-stage-curated) .armory-figure-nav {
    width: 30px;
    height: 54px;
    font-size: 1.85rem;
  }
}

/* === Armory centered appearance fine-tuning + minimal top controls · 2026-09-04 v15 ===
   Keep the v14 zoom, nudge only ch9/ch10 slightly right, and collapse the
   desktop Armory header into a lighter two-row command area. Mobile stays
   unchanged. */
@media (min-width: 981px) {
  /* ch9/ch10 need a small visual correction after the common curated zoom.
     Move the prepared canvas only; do not touch the user's vertical centering. */
  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(var(--armory-curated-zoom, 1.24));
  }

  /* First row: compact page name + mode tabs. Everything below spans the full
     width so this changes only the shell, not the workspace structure. */
  #armoryView .armory-page {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }

  #armoryView .armory-heading {
    grid-column: 1;
    grid-row: 1;
    min-height: 30px;
    margin: 0;
    padding: 0 9px 0 2px;
    border: 0;
    border-right: 1px solid rgba(98, 73, 42, 0.24);
    background: transparent;
    box-shadow: none;
  }

  #armoryView .armory-heading h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  #armoryView .armory-tabs {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #armoryView .armory-tabs button {
    min-width: 108px;
    min-height: 29px;
    height: 29px;
    padding: 3px 9px;
    font-size: 0.7rem;
    box-shadow: 0 1px 3px rgba(76, 52, 29, 0.08);
  }

  #armoryView .armory-tabs button small {
    min-width: 15px;
    min-height: 15px;
    margin-left: 3px;
    font-size: 0.56rem;
  }

  /* Second row: actions are a toolbar, not another full-width panel. */
  #armoryView .armory-mode-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: max-content;
    max-width: 100%;
    margin: 0;
  }

  #armoryView .armory-mode-actions > .armory-actions {
    min-height: 32px;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #armoryView .armory-import-field {
    flex-basis: min(270px, 25vw);
  }

  #armoryView .armory-import-field input,
  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    min-height: 29px;
    height: 29px;
  }

  #armoryView .armory-import-field input {
    padding: 3px 8px;
    font-size: 0.72rem;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    padding: 3px 8px;
    font-size: 0.64rem;
  }

  #armoryView #armoryStatus,
  #armoryView #armorySavedBuilds,
  #armoryView #armoryWorkspace {
    grid-column: 1 / -1;
  }

  /* The closed allocation block used to span the whole screen with empty
     parchment. Make it read as a compact disclosure above the workbench. */
  #armoryView .armory-manual-builder > details:not([open]) > summary {
    width: min(360px, 100%);
    min-height: 31px;
    padding: 3px 6px;
    font-size: 0.72rem;
  }

  #armoryView .armory-manual-builder > details:not([open]) > summary::before {
    width: 20px;
    height: 20px;
    font-size: 0.82rem;
  }
}

#armoryView .armory-slot-mobile-info,
#armoryView .armory-slot-tooltip-close {
  display: none;
}

/* === Armory mobile parity pass · 2026-09-04 v16 ===
   Bring the desktop Armory improvements from v4-v15 to phones/tablets without
   copying the desktop geometry. The mobile version keeps the same parchment
   language, compact progression controls, image-first equipment, curated
   appearances, quick item controls, rich item/stat information and compact
   active effects. Item-quality backgrounds are intentionally preserved. */
@media (max-width: 980px) {
  /* Shared tablet/phone appearance treatment. */
  #armoryView .armory-figure-stage.armory-figure-stage-curated {
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0;
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transform: scale(var(--armory-curated-mobile-zoom, 1.28));
    transform-origin: 50% 50%;
    filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.4));
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(var(--armory-curated-mobile-zoom, 1.28));
  }

  /* Image-first equipped items: same visual language as desktop v11/v12. */
  #armoryView .armory-slot-wrap {
    position: relative;
  }

  #armoryView .armory-slot.filled {
    position: relative;
    display: grid;
    grid-template-columns: 70px;
    grid-template-rows: 70px 20px;
    justify-content: center;
    align-content: start;
    row-gap: 3px;
    width: 82px;
    min-width: 82px;
    min-height: 99px;
    padding: 4px 5px 5px;
    border-radius: 10px;
  }

  #armoryView .armory-slot.filled > img {
    grid-column: 1;
    grid-row: 1;
    width: 70px;
    height: 70px;
    border-radius: 11px;
    box-shadow:
      inset 0 0 12px rgba(255, 255, 255, 0.14),
      0 4px 10px rgba(60, 42, 28, 0.18);
  }

  #armoryView .armory-slot.filled > .armory-slot-label,
  #armoryView .armory-slot.filled > strong,
  #armoryView .armory-slot.filled > .armory-requirement-line {
    display: none;
  }

  #armoryView .armory-slot-meta {
    display: contents;
  }

  #armoryView .armory-slot.filled .armory-slot-tier {
    position: absolute;
    z-index: 4;
    top: 6px;
    right: 6px;
    display: grid;
    width: 25px;
    min-width: 25px;
    height: 17px;
    min-height: 17px;
    place-items: center;
    padding: 0 3px;
    border: 1px solid rgba(255, 246, 220, 0.4);
    border-radius: 5px;
    background: rgba(38, 34, 38, 0.9);
    color: #fff7dd;
    box-shadow: 0 2px 5px rgba(44, 31, 25, 0.22);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
  }

  #armoryView .armory-slot.filled .armory-rune-icons {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    width: 70px;
    min-width: 0;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    flex-wrap: nowrap;
  }

  #armoryView .armory-slot.filled .armory-rune-icons i {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(60, 42, 28, 0.15);
  }

  #armoryView .armory-slot.filled .armory-rune-icons img {
    width: 100%;
    height: 100%;
  }

  /* Permanent fitted quick controls, available to touch rather than hover. */
  #armoryView .armory-slot-wrap.has-quick-controls {
    z-index: 3;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    position: static;
    display: grid;
    width: 57px;
    min-width: 57px;
    max-height: 88px;
    align-content: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(92, 65, 38, 0.23);
    border-radius: 9px;
    background: rgba(255, 249, 229, 0.92);
    box-shadow: 0 3px 8px rgba(58, 40, 27, 0.11);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  #armoryView .armory-quick-control-row,
  #armoryView .armory-quick-control-row + .armory-quick-control-row {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #armoryView .armory-quick-control-row > span {
    display: none;
  }

  #armoryView .armory-quick-control-row > div {
    display: grid;
    grid-template-columns: repeat(2, 23px);
    justify-content: center;
    gap: 3px;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button {
    display: grid;
    width: 23px;
    min-width: 23px;
    height: 23px;
    min-height: 23px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(96, 69, 38, 0.27);
    border-radius: 6px;
    background: rgba(255, 250, 232, 0.98);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(59, 42, 28, 0.1);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button:disabled {
    opacity: 0.27;
    box-shadow: none;
  }

  #armoryView .armory-quick-control-variant > button.variant {
    width: 49px;
    min-width: 49px;
    height: 23px;
    min-height: 23px;
    font-size: 0.54rem;
    letter-spacing: 0;
  }

  /* Item information is exposed as a mobile sheet by the info button added in
     app.js. Desktop keeps hover behavior from v7/v8. */
  #armoryView .armory-slot-tooltip {
    position: fixed;
    z-index: 230;
    right: 8px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 8px;
    top: auto;
    width: auto;
    max-width: none;
    max-height: min(62dvh, 560px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(84, 59, 35, 0.34);
    border-radius: 12px;
    visibility: hidden;
    opacity: 0;
    background: rgba(255, 250, 231, 0.99);
    box-shadow: 0 16px 44px rgba(42, 29, 20, 0.34);
    pointer-events: none;
    transform: translateY(12px) scale(0.985);
    transition: opacity 130ms ease, transform 130ms ease, visibility 130ms ease;
  }

  #armoryView .armory-slot-wrap.mobile-tooltip-open > .armory-slot-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #armoryView .armory-slot-tooltip > header {
    position: sticky;
    top: -10px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 2px 8px;
    align-items: center;
    margin: -2px -2px 7px;
    padding: 3px 2px 8px;
    border-bottom: 1px solid rgba(92, 67, 39, 0.18);
    background: rgba(255, 250, 231, 0.99);
  }

  #armoryView .armory-slot-tooltip > header strong {
    grid-column: 1;
    font-size: 0.92rem;
    line-height: 1.2;
  }

  #armoryView .armory-slot-tooltip > header small {
    grid-column: 1;
    color: var(--muted);
    font-size: 0.7rem;
  }

  #armoryView .armory-slot-tooltip-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(107, 64, 42, 0.28);
    border-radius: 50%;
    background: rgba(255, 246, 221, 0.9);
    color: #8b2e2e;
    font-size: 1.1rem;
  }

  #armoryView .armory-slot-tooltip-section {
    margin-top: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(97, 69, 37, 0.16);
    background: rgba(255, 246, 217, 0.52);
  }

  #armoryView .armory-slot-tooltip-section h5 {
    margin: 0 0 5px;
    font-size: 0.7rem;
  }

  #armoryView .armory-slot-tooltip-section ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #armoryView .armory-slot-tooltip-section li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  #armoryView .armory-slot-tooltip-section li > strong {
    max-width: 54vw;
    text-align: right;
    white-space: normal;
  }

  #armoryView .armory-slot-mobile-info {
    position: absolute;
    z-index: 6;
    right: 7px;
    bottom: 28px;
    display: grid;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 246, 220, 0.62);
    border-radius: 50%;
    background: rgba(43, 38, 40, 0.82);
    color: #fff7dd;
    box-shadow: 0 2px 5px rgba(44, 31, 25, 0.2);
    font: 800 0.7rem/1 Georgia, serif;
  }

  /* The existing source dialog opened by "i" is presented with the same local
     card language on touch screens. */
  .armory-stat-source-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 8px 8px calc(68px + env(safe-area-inset-bottom));
    background: rgba(37, 26, 19, 0.14);
  }

  .armory-stat-source-popover {
    width: min(100%, 430px);
    max-height: min(64dvh, 570px);
    padding: 10px;
    border: 1px solid rgba(84, 59, 35, 0.34);
    border-radius: 12px;
    background: rgba(255, 250, 231, 0.99);
    box-shadow: 0 16px 44px rgba(42, 29, 20, 0.34);
  }

  .armory-stat-source-popover > header {
    position: sticky;
    top: -10px;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    gap: 7px;
    padding: 3px 2px 8px;
    background: rgba(255, 250, 231, 0.99);
  }

  .armory-stat-source-entry {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 42px;
    padding: 5px 6px;
  }

  /* Active buffs/scrolls keep their short card; description appears on tap
     (focus) instead of being permanently printed inside the card. */
  #armoryView .armory-active-buffs {
    overflow: visible;
  }

  #armoryView .armory-buff-card {
    position: relative;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
    min-height: 54px;
    padding: 5px 30px 5px 6px;
  }

  #armoryView .armory-buff-icon {
    width: 38px;
    height: 42px;
  }

  #armoryView .armory-buff-body > span {
    font-size: 0.62rem;
  }

  #armoryView .armory-buff-body strong {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #armoryView .armory-buff-body > small:not(.armory-buff-tooltip) {
    display: none;
  }

  #armoryView .armory-buff-tooltip {
    position: absolute;
    left: 4px;
    bottom: calc(100% + 5px);
    z-index: 80;
    width: max-content;
    max-width: min(310px, calc(100vw - 34px));
    padding: 7px 9px;
    border: 1px solid rgba(92, 67, 39, 0.28);
    border-radius: 8px;
    visibility: hidden;
    opacity: 0;
    background: rgba(255, 249, 229, 0.99);
    box-shadow: 0 8px 20px rgba(76, 52, 29, 0.18);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  }

  #armoryView .armory-buff-card:focus .armory-buff-tooltip,
  #armoryView .armory-buff-card:focus-within .armory-buff-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  /* Minimal top shell from v6/v15, reshaped for phones and narrow tablets. */
  #armoryView .armory-page {
    gap: 7px;
  }

  #armoryView .armory-heading {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 1px 2px 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #armoryView .armory-heading .eyebrow,
  #armoryView .armory-heading p:not(.eyebrow) {
    display: none;
  }

  #armoryView .armory-heading h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.05;
    letter-spacing: 0.025em;
  }

  #armoryView .armory-tabs {
    display: flex;
    width: 100%;
    gap: 4px;
    padding: 0 0 3px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #armoryView .armory-tabs::-webkit-scrollbar {
    display: none;
  }

  #armoryView .armory-tabs button {
    flex: 0 0 auto;
    width: auto;
    min-width: 112px;
    min-height: 34px;
    height: 34px;
    padding: 4px 9px;
    font-size: 0.72rem;
    scroll-snap-align: start;
  }

  #armoryView .armory-tabs button small {
    min-width: 16px;
    min-height: 16px;
    margin-left: 3px;
    font-size: 0.56rem;
  }

  #armoryView .armory-mode-actions {
    width: 100%;
  }

  #armoryView .armory-mode-actions > .armory-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 5px;
    min-height: 0;
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(98, 73, 42, 0.16);
    background: rgba(255, 249, 229, 0.28);
    box-shadow: none;
  }

  #armoryView .armory-import-field {
    grid-column: 1 / -1;
    gap: 0;
    width: 100%;
    font-size: 0;
  }

  #armoryView .armory-import-field input {
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 6px 9px;
    font-size: 0.86rem;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 4px 6px;
    font-size: 0.67rem;
    white-space: normal;
  }

  /* Closed allocation is a compact disclosure; open content becomes the same
     three cards as desktop, stacked and touch-friendly. */
  #armoryView .armory-manual-builder > details > summary,
  #armoryView .armory-build-library > summary,
  #armoryView .armory-picker-section > summary,
  #armoryView .armory-appearance-field details > summary,
  #armoryView .armory-buff-picker > summary,
  #armoryView .armory-stat-details > summary {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 38px;
    padding: 5px 7px;
    font-size: 0.78rem;
  }

  #armoryView .armory-manual-builder > details > summary::before,
  #armoryView .armory-build-library > summary::before,
  #armoryView .armory-picker-section > summary::before,
  #armoryView .armory-appearance-field details > summary::before,
  #armoryView .armory-buff-picker > summary::before,
  #armoryView .armory-stat-details > summary::before {
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }

  #armoryView .armory-manual-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px;
  }

  #armoryView .armory-manual-toolbar,
  #armoryView .armory-allocation-section {
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(92, 67, 39, 0.2);
    background: rgba(255, 248, 226, 0.66);
    box-shadow: 0 2px 7px rgba(76, 52, 29, 0.045);
  }

  #armoryView .armory-manual-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 7px;
  }

  #armoryView .armory-manual-mode,
  #armoryView .armory-manual-controls {
    grid-column: 1 / -1;
  }

  #armoryView .armory-manual-mode {
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 2px 6px;
    font-size: 0.64rem;
  }

  #armoryView .armory-manual-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  #armoryView .armory-manual-controls label,
  #armoryView .armory-manual-glory {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(92, 67, 39, 0.11);
    font-size: 0.76rem;
  }

  #armoryView .armory-manual-controls label:last-child {
    border-bottom: 0;
  }

  #armoryView .armory-manual-controls input,
  #armoryView .armory-manual-glory strong {
    width: 76px;
    min-width: 76px;
    min-height: 32px;
    height: 32px;
    padding: 2px 5px;
    font-size: 0.82rem;
    text-align: center;
  }

  #armoryView .armory-manual-glory strong {
    display: grid;
    place-items: center;
    border: 1px solid rgba(92, 67, 39, 0.18);
    background: rgba(239, 220, 178, 0.46);
  }

  #armoryView .armory-manual-remort-stepper {
    display: grid;
    grid-template-columns: 30px 48px 30px;
    gap: 4px;
    align-items: center;
  }

  #armoryView .armory-manual-remort-stepper button,
  #armoryView .armory-manual-remort-stepper input {
    width: auto;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    text-align: center;
  }

  #armoryView .armory-manual-remort-stepper input {
    width: 48px;
    appearance: textfield;
  }

  #armoryView .armory-manual-remort-stepper input::-webkit-inner-spin-button,
  #armoryView .armory-manual-remort-stepper input::-webkit-outer-spin-button,
  #armoryView .armory-manual-stat input[type="number"]::-webkit-inner-spin-button,
  #armoryView .armory-manual-stat input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  #armoryView .armory-manual-pool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "meta meta";
    gap: 1px 6px;
    min-width: 0;
    min-height: 45px;
    padding: 6px 7px;
    border: 1px solid rgba(92, 67, 39, 0.15);
    background: rgba(239, 220, 178, 0.24);
  }

  #armoryView .armory-manual-pool > span {
    grid-area: label;
    font-size: 0.67rem;
    font-weight: 800;
  }

  #armoryView .armory-manual-pool > strong {
    grid-area: value;
    font-size: 0.9rem;
    line-height: 1;
  }

  #armoryView .armory-manual-pool > small {
    grid-area: meta;
    font-size: 0.6rem;
    opacity: 0.72;
  }

  #armoryView .armory-allocation-section {
    display: flex;
    flex-direction: column;
  }

  #armoryView .armory-allocation-section > header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
    min-height: 26px;
    margin: 0 0 3px;
    padding: 0 2px 5px;
    border-bottom: 1px solid rgba(92, 67, 39, 0.14);
  }

  #armoryView .armory-allocation-section > header h3 {
    margin: 0;
    font-size: 0.82rem;
  }

  #armoryView .armory-allocation-section > header small {
    max-width: 54%;
    font-size: 0.58rem;
    line-height: 1.15;
    text-align: right;
  }

  #armoryView .armory-manual-stats,
  #armoryView .armory-manual-mastery-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #armoryView .armory-manual-stat {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 4px 2px;
    border: 0;
    border-bottom: 1px solid rgba(92, 67, 39, 0.1);
    background: transparent;
    box-shadow: none;
  }

  #armoryView .armory-manual-stat:last-child {
    border-bottom: 0;
  }

  #armoryView .armory-manual-stat > span strong {
    display: block;
    font-size: 0.75rem;
    line-height: 1.12;
  }

  #armoryView .armory-manual-stat > span small {
    display: block;
    margin-top: 1px;
    font-size: 0.58rem;
    line-height: 1.05;
    opacity: 0.68;
  }

  #armoryView .armory-manual-stat > div {
    display: grid;
    grid-template-columns: 29px 49px 29px 44px;
    align-items: center;
    gap: 3px;
  }

  #armoryView .armory-manual-mastery .armory-manual-stat > div {
    grid-template-columns: 29px 49px 29px;
  }

  #armoryView .armory-manual-stat button,
  #armoryView .armory-manual-stat input[type="number"],
  #armoryView .armory-manual-total {
    min-width: 0;
    min-height: 29px;
    height: 29px;
    margin: 0;
    padding: 0 3px;
    font-size: 0.76rem;
  }

  #armoryView .armory-manual-stat button {
    width: 29px;
    padding: 0;
    font-size: 0.92rem;
  }

  #armoryView .armory-manual-stat input[type="number"] {
    width: 49px;
    text-align: center;
    appearance: textfield;
  }

  #armoryView .armory-manual-total {
    display: grid;
    min-width: 44px;
    place-items: center;
    font-weight: 700;
  }

  #armoryView .armory-manual-requirements {
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
  }

  /* Phone workspace: character first, equipment immediately below in two
     narrow columns. This avoids squeezing a figure between 12 controls. */
  #armoryView .armory-workbench-body,
  #armoryView .armory-workbench.appearance-hidden:not(.focus-mode) .armory-workbench-body {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #armoryView .armory-loadout {
    min-width: 0;
    padding: 8px;
  }

  #armoryView .armory-loadout-head {
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  #armoryView .armory-loadout-head h3 {
    font-size: 1.02rem;
  }

  #armoryView .armory-loadout-head .ghost-btn {
    min-width: 108px;
    min-height: 34px;
    padding: 4px 7px;
    font-size: 0.7rem;
  }

  #armoryView .armory-doll,
  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    display: grid;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "figure figure"
      "left right";
    align-items: start;
    justify-content: stretch;
    gap: 8px 6px;
  }

  #armoryView .armory-slot-column-left { grid-area: left; }
  #armoryView .armory-slot-column-right { grid-area: right; }
  #armoryView .armory-figure { grid-area: figure; }

  #armoryView .armory-slot-column {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  #armoryView .armory-slot-wrap {
    display: grid;
    align-items: center;
    min-width: 0;
    gap: 4px;
  }

  #armoryView .armory-slot-wrap-left {
    grid-template-columns: minmax(82px, 1fr) 57px;
  }

  #armoryView .armory-slot-wrap-right {
    grid-template-columns: 57px minmax(82px, 1fr);
  }

  #armoryView .armory-slot-wrap-left > .armory-slot { grid-column: 1; }
  #armoryView .armory-slot-wrap-left > .armory-quick-item-controls { grid-column: 2; }
  #armoryView .armory-slot-wrap-right > .armory-slot { grid-column: 2; }
  #armoryView .armory-slot-wrap-right > .armory-quick-item-controls { grid-column: 1; grid-row: 1; }

  #armoryView .armory-slot-wrap > .armory-slot.filled {
    justify-self: center;
  }

  #armoryView .armory-slot-wrap > .armory-slot.empty {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 90px;
    padding: 7px;
  }

  #armoryView .armory-slot-mobile-info {
    right: auto;
    left: 54px;
    bottom: 27px;
  }

  #armoryView .armory-slot-wrap-right .armory-slot-mobile-info {
    left: auto;
    right: 6px;
  }

  #armoryView .armory-figure:has(.armory-figure-stage-curated) {
    width: 100%;
    min-height: clamp(430px, 58vw, 520px);
    height: clamp(430px, 58vw, 520px);
    align-self: stretch;
  }

  #armoryView .armory-figure-stage {
    min-height: 0;
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img {
    transform: scale(var(--armory-curated-mobile-zoom, 1.3));
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(var(--armory-curated-mobile-zoom, 1.3));
  }

  #armoryView .armory-figure-nav {
    width: 36px;
    min-width: 36px;
    height: 54px;
    min-height: 54px;
    font-size: 1.8rem;
  }

  #armoryView .armory-figure-nav-prev { left: 5px; }
  #armoryView .armory-figure-nav-next { right: 5px; }

  #armoryView .armory-appearance-info {
    gap: 2px;
    padding: 6px 8px 7px;
  }

  #armoryView .armory-appearance-info strong {
    font-size: 0.84rem;
  }

  #armoryView .armory-appearance-info small {
    font-size: 0.68rem;
    line-height: 1.22;
  }

  #armoryView .armory-active-buffs {
    margin-top: 7px;
    padding: 7px;
  }

  #armoryView .armory-buffs-heading {
    margin-bottom: 6px;
  }

  #armoryView .armory-buffs-heading h4 {
    font-size: 0.88rem;
  }

  #armoryView .armory-buffs-grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  /* Right-side editor becomes a compact accordion after the loadout. */
  #armoryView .armory-editor {
    grid-column: auto;
    gap: 7px;
    min-width: 0;
  }

  #armoryView .armory-picker-section > summary,
  #armoryView .armory-appearance-field details > summary,
  #armoryView .armory-buff-picker > summary {
    min-height: 38px;
  }

  #armoryView .armory-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #armoryView .armory-filter-bar label {
    min-width: 0;
    font-size: 0.7rem;
  }

  #armoryView .armory-filter-bar select,
  #armoryView .armory-filter-bar button,
  #armoryView .armory-editor-head input {
    min-height: 38px;
    font-size: 0.82rem;
  }

  #armoryView .armory-catalog {
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: 54dvh;
  }

  #armoryView .armory-catalog-card {
    min-height: 66px;
    padding: 6px;
  }

  #armoryView .armory-catalog-card img {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  /* Mobile result dashboard keeps the desktop hierarchy but avoids long cards. */
  #armoryView .armory-summary {
    padding: 9px;
  }

  #armoryView .armory-summary > h3 {
    font-size: 1.15rem;
  }

  #armoryView .armory-build-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
  }

  #armoryView .armory-build-overview span {
    min-height: 34px;
    padding: 5px 7px;
    font-size: 0.76rem;
  }

  #armoryView .armory-build-overview b {
    font-size: 0.86rem;
  }

  #armoryView .armory-set-bonus {
    margin-top: 7px;
    padding: 8px;
  }

  #armoryView .armory-set-bonus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  #armoryView .armory-key-dashboard {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 9px;
  }

  #armoryView .armory-key-card-head {
    min-height: 44px;
    padding: 7px 9px;
  }

  #armoryView .armory-key-card-head h4 {
    font-size: 1rem;
  }

  #armoryView .armory-key-card-head > strong,
  #armoryView .armory-key-hero-value > strong {
    font-size: 1.3rem;
  }

  #armoryView .armory-key-stat-list {
    padding: 4px 7px 7px;
  }

  #armoryView .armory-key-stat-list > div,
  #armoryView .armory-stat-list > div {
    min-height: 44px;
    padding: 6px 4px;
  }

  #armoryView .armory-key-stat-list .armory-stat-name,
  #armoryView .armory-stat-name {
    font-size: 0.84rem;
    line-height: 1.18;
  }

  #armoryView .armory-key-stat-list .armory-stat-name > small,
  #armoryView .armory-stat-name > small {
    margin-top: 2px;
    font-size: 0.69rem;
    line-height: 1.2;
  }

  #armoryView .armory-key-stat-list > div > strong,
  #armoryView .armory-stat-list strong {
    font-size: 0.94rem;
  }

  #armoryView .armory-stat-details .armory-stat-groups,
  #armoryView .armory-stat-groups {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 6px;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  #armoryView .armory-slot-tooltip {
    bottom: 12px;
  }

  .armory-stat-source-overlay {
    padding-bottom: 12px;
  }
}

@media (max-width: 390px) {
  #armoryView .armory-mode-actions > .armory-actions {
    grid-template-columns: 1fr;
  }

  #armoryView .armory-manual-toolbar {
    grid-template-columns: 1fr;
  }

  #armoryView .armory-manual-pool {
    min-height: 42px;
  }

  #armoryView .armory-doll,
  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    gap: 7px 3px;
  }

  #armoryView .armory-slot-wrap-left {
    grid-template-columns: minmax(76px, 1fr) 53px;
  }

  #armoryView .armory-slot-wrap-right {
    grid-template-columns: 53px minmax(76px, 1fr);
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    width: 53px;
    min-width: 53px;
    padding: 3px;
  }

  #armoryView .armory-quick-control-row > div {
    grid-template-columns: repeat(2, 21px);
  }

  #armoryView .armory-quick-item-controls .armory-quick-control-row button {
    width: 21px;
    min-width: 21px;
    height: 22px;
    min-height: 22px;
  }

  #armoryView .armory-quick-control-variant > button.variant {
    width: 45px;
    min-width: 45px;
  }

  #armoryView .armory-figure:has(.armory-figure-stage-curated) {
    height: 400px;
    min-height: 400px;
  }

  #armoryView .armory-manual-stat {
    grid-template-columns: minmax(82px, 1fr) auto;
  }

  #armoryView .armory-manual-stat > div {
    grid-template-columns: 27px 45px 27px 40px;
  }

  #armoryView .armory-manual-mastery .armory-manual-stat > div {
    grid-template-columns: 27px 45px 27px;
  }

  #armoryView .armory-manual-stat button,
  #armoryView .armory-manual-stat input[type="number"],
  #armoryView .armory-manual-total {
    height: 28px;
    min-height: 28px;
    font-size: 0.72rem;
  }
}

/* === Armory workspace-first shell · 2026-09-04 v17 ===
   Move progression/allocation into the editor accordion stack, keep the focus
   action in the same compact command rail, and remove redundant loadout chrome
   so the actual dressing workspace starts higher. Desktop and mobile share the
   same information architecture; item quality styling remains untouched. */
@media (min-width: 981px) {
  #armoryView .armory-mode-actions {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  #armoryView .armory-mode-actions > .armory-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    min-width: 0;
    max-width: none;
    gap: 4px;
  }

  #armoryView .armory-import-field {
    flex: 0 0 min(250px, 24vw);
    min-width: 180px;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  /* The loadout no longer needs its own title/toggle row. */
  #armoryView .armory-loadout {
    padding-top: 7px;
  }

  #armoryView .armory-doll:not(.armory-figure-hidden) {
    margin-top: 0;
  }

  /* Allocation is now the first editor accordion, matching Items/Runes/etc. */
  #armoryView .armory-editor > .armory-manual-builder {
    min-width: 0;
    margin: 0;
  }

  #armoryView .armory-editor > .armory-manual-builder > details > summary,
  #armoryView .armory-editor > .armory-manual-builder > details:not([open]) > summary {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  /* Three cards still fit comfortably inside the desktop editor, but use
     smaller minimums now that the panel lives in the right column. */
  #armoryView .armory-editor .armory-manual-content {
    grid-template-columns: minmax(160px, 0.72fr) minmax(220px, 1.14fr) minmax(230px, 1.14fr);
  }
}

@media (max-width: 980px) {
  /* One horizontal command rail on touch layouts. It can scroll instead of
     turning Focus/Save into a second or third row. */
  #armoryView .armory-mode-actions {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #armoryView .armory-mode-actions::-webkit-scrollbar {
    display: none;
  }

  #armoryView .armory-mode-actions > .armory-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    min-width: 100%;
    gap: 4px;
    padding: 4px;
  }

  #armoryView .armory-import-field {
    flex: 0 0 clamp(150px, 38vw, 210px);
    width: auto;
    min-width: 150px;
  }

  #armoryView .armory-import-field input {
    width: 100%;
    min-height: 36px;
    height: 36px;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    height: 36px;
    padding-inline: 8px;
    white-space: nowrap;
  }

  /* The figure starts immediately: no redundant Equipment/Hide appearance row. */
  #armoryView .armory-loadout {
    padding-top: 5px;
  }

  #armoryView .armory-doll,
  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    margin-top: 0;
  }

  /* Allocation follows the loadout as the first tool accordion. */
  #armoryView .armory-editor > .armory-manual-builder {
    min-width: 0;
    margin: 0;
  }

  #armoryView .armory-editor > .armory-manual-builder > details > summary,
  #armoryView .armory-editor > .armory-manual-builder > details:not([open]) > summary {
    width: 100%;
    max-width: none;
  }

  #armoryView .armory-editor .armory-manual-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  #armoryView .armory-mode-actions > .armory-actions {
    min-width: max-content;
  }

  #armoryView .armory-import-field {
    flex-basis: 148px;
    min-width: 148px;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    padding-inline: 7px;
    font-size: 0.64rem;
  }
}

/* === Armory regression fixes after workspace-first move · 2026-09-04 v18 ===
   Restore empty-slot readability for new builds, make the moved allocation
   disclosure visually identical to the editor accordions, and restore the
   centered/wide read-only shared-build presentation. No calculations or item
   quality colors are changed. */
@media (min-width: 981px) {
  /* New-build empty slots inherit the compact 82px item column. Do not keep
     the old two-column label layout inside that narrow tile: it squeezes the
     Russian slot name into a vertical letter stack. */
  #armoryView .armory-slot-wrap > .armory-slot.empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 5px;
    width: 82px;
    min-width: 82px;
    min-height: 99px;
    padding: 6px 5px;
    text-align: center;
  }

  #armoryView .armory-slot-wrap > .armory-slot.empty .armory-slot-label {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
    writing-mode: horizontal-tb;
  }

  #armoryView .armory-slot-wrap > .armory-slot.empty > strong {
    display: none;
  }

  #armoryView .armory-slot-wrap > .armory-slot.empty .armory-slot-placeholder {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0;
    border-radius: 9px;
    font-size: 1.15rem;
  }

  /* v15 intentionally made the old top-level allocation disclosure tiny.
     After v17 moved it into the editor, reset those old closed-summary values
     so it is indistinguishable from Items / Runes / Enchants / Appearance. */
  #armoryView .armory-editor > .armory-manual-builder > details > summary,
  #armoryView .armory-editor > .armory-manual-builder > details:not([open]) > summary {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 7px;
    width: 100%;
    max-width: none;
    min-height: 42px;
    padding: 6px 9px;
    font-size: 0.92rem;
    box-shadow: 0 2px 7px rgba(76, 52, 29, 0.055);
  }

  #armoryView .armory-editor > .armory-manual-builder > details > summary::before,
  #armoryView .armory-editor > .armory-manual-builder > details:not([open]) > summary::before {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  /* Shared links are read-only and contain no right editor column. The compact
     workbench rule introduced for editing had higher specificity and left the
     loadout/results trapped in the old 620px first column. Restore a centered
     one-column presentation specifically for shared results. */
  #armoryView .armory-shared-results > .armory-shared-results-head {
    width: min(100%, 1180px);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
  }

  #armoryView .armory-shared-results .armory-workbench-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1180px);
    margin-right: auto;
    margin-left: auto;
    gap: 14px;
  }

  #armoryView .armory-shared-results .armory-loadout {
    grid-column: 1;
    width: min(100%, 1040px);
    justify-self: center;
  }

  #armoryView .armory-shared-results .armory-summary {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  /* Read-only mode has no per-slot control rails, so use that space to give
     the figure a comfortable width while keeping the whole loadout centered. */
  #armoryView .armory-shared-results .armory-doll:not(.armory-figure-hidden) {
    width: min(100%, 780px);
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: 110px minmax(380px, 480px) 110px;
    column-gap: 24px;
    justify-content: center;
  }

  #armoryView .armory-shared-results .armory-slot-column {
    justify-items: center;
  }
}

@media (max-width: 980px) {
  /* Keep the same v18 fixes on touch layouts without imposing desktop widths. */
  #armoryView .armory-slot-wrap > .armory-slot.empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 5px;
    text-align: center;
  }

  #armoryView .armory-slot-wrap > .armory-slot.empty .armory-slot-label {
    width: 100%;
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
    writing-mode: horizontal-tb;
  }

  #armoryView .armory-slot-wrap > .armory-slot.empty > strong {
    display: none;
  }

  #armoryView .armory-editor > .armory-manual-builder > details > summary,
  #armoryView .armory-editor > .armory-manual-builder > details:not([open]) > summary {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px;
    width: 100%;
    max-width: none;
    min-height: 38px;
    padding: 5px 7px;
    font-size: 0.78rem;
  }

  #armoryView .armory-editor > .armory-manual-builder > details > summary::before,
  #armoryView .armory-editor > .armory-manual-builder > details:not([open]) > summary::before {
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head,
  #armoryView .armory-shared-results .armory-workbench-body,
  #armoryView .armory-shared-results .armory-loadout,
  #armoryView .armory-shared-results .armory-summary {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  #armoryView .armory-shared-results .armory-workbench-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === Armory slot-control breathing room · 2026-09-04 v20 ===
   v19 used margins inside the fixed control tracks, so the requested two-pixel
   gap was effectively absorbed by the grid and was barely visible. Create the
   breathing room at the doll-grid level instead: the entire equipment/control
   column now sits away from the appearance frame. */
#armoryView .armory-slot-wrap-left > .armory-quick-item-controls,
#armoryView .armory-slot-wrap-right > .armory-quick-item-controls {
  margin-right: 0;
  margin-left: 0;
}

@media (min-width: 981px) {
  #armoryView .armory-doll:not(.armory-figure-hidden),
  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    column-gap: 56px;
  }
}

@media (max-width: 980px) {
  #armoryView .armory-doll,
  #armoryView .armory-loadout .armory-doll.armory-figure-hidden {
    column-gap: 5px;
  }
}

/* === Armory clean shared view + compact build library · 2026-09-04 v21 ===
   Read-only shared builds are presentation-only: hide editing rails, keep the
   prepared appearance canvas fully visible, and center the whole result. The
   saved-builds tab is condensed without changing any save/share behavior. */
@media (min-width: 981px) {
  /* Shared build: one centered presentation column with no editing controls. */
  #armoryView .armory-shared-results {
    width: 100%;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head {
    width: min(calc(100% - 32px), 1240px);
    margin: 0 auto 10px;
    padding: 12px 18px;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  }

  #armoryView .armory-shared-results .armory-workbench-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(calc(100% - 32px), 1240px);
    margin: 0 auto;
    gap: 12px;
  }

  #armoryView .armory-shared-results .armory-loadout {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 10px 12px 12px;
    justify-self: center;
  }

  /* Shared links are non-editable. Do not show quality/version/tier rails. */
  #armoryView .armory-shared-results .armory-quick-item-controls,
  #armoryView .armory-shared-results .armory-slot-mobile-info,
  #armoryView .armory-shared-results .armory-loadout-head,
  #armoryView .armory-shared-results .armory-figure-nav {
    display: none !important;
  }

  #armoryView .armory-shared-results .armory-doll:not(.armory-figure-hidden) {
    width: min(100%, 850px);
    margin: 0 auto;
    grid-template-columns: 92px minmax(430px, 560px) 92px;
    column-gap: 16px;
    align-items: stretch;
    justify-content: center;
  }

  #armoryView .armory-shared-results .armory-slot-column {
    gap: 5px;
    justify-items: center;
  }

  #armoryView .armory-shared-results .armory-slot-wrap {
    display: block;
    width: 82px;
  }

  /* The public preview should show the prepared character artwork completely.
     Editing keeps the stronger v14 zoom; shared view intentionally does not. */
  #armoryView .armory-shared-results .armory-figure:has(.armory-figure-stage-curated) {
    height: 610px;
    min-height: 610px;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated {
    overflow: hidden;
    padding: 10px 4px 4px;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.04);
    transform-origin: 50% 50%;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(1.04);
  }

  #armoryView .armory-shared-results .armory-summary {
    width: min(100%, 1180px);
    margin: 0 auto;
    min-width: 0;
  }

  /* Saved builds: compact library header and save bar. */
  #armoryView .armory-build-library-page,
  #armoryView .armory-shared-links {
    padding: 12px 14px;
    border: 1px solid rgba(91, 64, 36, 0.22);
    background: rgba(255, 249, 228, 0.42);
    box-shadow: 0 4px 14px rgba(73, 50, 29, 0.055);
  }

  #armoryView .armory-build-library-page .armory-mode-section-head,
  #armoryView .armory-shared-links .armory-mode-section-head {
    min-height: 0;
    margin: 0 0 9px;
    padding: 0 1px 8px;
    align-items: end;
    border-bottom: 1px solid rgba(91, 64, 36, 0.16);
  }

  #armoryView .armory-build-library-page .armory-mode-section-head .eyebrow,
  #armoryView .armory-shared-links .armory-mode-section-head .eyebrow {
    margin-bottom: 2px;
    font-size: 0.58rem;
  }

  #armoryView .armory-build-library-page .armory-mode-section-head h3,
  #armoryView .armory-shared-links .armory-mode-section-head h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.05;
  }

  #armoryView .armory-build-library-page .armory-mode-section-head > p,
  #armoryView .armory-shared-links .armory-mode-section-head > p {
    margin: 0;
    font-size: 0.68rem;
    color: var(--muted);
  }

  #armoryView .armory-build-save-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 116px auto auto;
    gap: 6px;
    align-items: center;
    margin: 0 0 9px;
    padding: 7px;
    border: 1px solid rgba(91, 64, 36, 0.14);
    background: rgba(255, 252, 239, 0.52);
  }

  #armoryView .armory-build-save-row input,
  #armoryView .armory-build-save-row select,
  #armoryView .armory-build-save-row button {
    min-height: 32px;
    height: 32px;
    margin: 0;
    font-size: 0.68rem;
  }

  #armoryView .armory-build-list,
  #armoryView .armory-shared-link-list {
    display: grid;
    gap: 6px;
  }

  #armoryView .armory-build-label {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 7px 9px;
    border-width: 1px 1px 1px 4px;
    background: rgba(255, 252, 239, 0.64);
    box-shadow: 0 2px 7px rgba(72, 49, 29, 0.045);
  }

  #armoryView .armory-build-identity {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  #armoryView .armory-build-color-dot {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    margin: 0;
  }

  #armoryView .armory-build-identity > span {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  #armoryView .armory-build-identity input {
    width: 100%;
    min-height: 26px;
    height: 26px;
    padding: 1px 4px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
  }

  #armoryView .armory-build-identity input:focus {
    border: 1px solid rgba(128, 72, 44, 0.35);
    background: rgba(255, 255, 255, 0.65);
    outline: none;
  }

  #armoryView .armory-build-identity small {
    padding-left: 4px;
    font-size: 0.59rem;
    color: var(--muted);
  }

  #armoryView .armory-build-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
  }

  #armoryView .armory-build-controls button {
    min-height: 29px;
    height: 29px;
    padding: 3px 8px;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  #armoryView .armory-build-controls [data-armory-load-named] {
    order: -5;
  }

  #armoryView .armory-build-controls [data-armory-copy-named] {
    order: -4;
  }

  #armoryView .armory-build-controls [data-armory-share-named] {
    order: -3;
  }

  #armoryView .armory-build-controls [data-armory-rename] {
    order: -2;
  }

  #armoryView .armory-build-controls [data-armory-delete-named] {
    order: -1;
    opacity: 0.76;
  }

  #armoryView .armory-shared-links {
    margin-top: 10px;
  }

  #armoryView .armory-shared-link-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 6px 9px;
    border: 1px solid rgba(91, 64, 36, 0.14);
    background: rgba(255, 252, 239, 0.62);
  }

  #armoryView .armory-shared-link-list article > div:first-child {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  #armoryView .armory-shared-link-list strong {
    font-size: 0.75rem;
  }

  #armoryView .armory-shared-link-list small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.59rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #armoryView .armory-shared-link-list article > div:last-child {
    display: flex;
    gap: 4px;
  }

  #armoryView .armory-shared-link-list button {
    min-height: 28px;
    height: 28px;
    padding: 3px 8px;
    font-size: 0.6rem;
  }
}

@media (max-width: 980px) {
  /* Shared build keeps the phone-first figure/equipment flow, but remains
     presentation-only and avoids the editing rail controls. */
  #armoryView .armory-shared-results .armory-quick-item-controls,
  #armoryView .armory-shared-results .armory-loadout-head,
  #armoryView .armory-shared-results .armory-figure-nav {
    display: none !important;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img {
    transform: scale(1.06);
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(1.06);
  }

  #armoryView .armory-build-library-page,
  #armoryView .armory-shared-links {
    padding: 8px;
  }

  #armoryView .armory-build-library-page .armory-mode-section-head,
  #armoryView .armory-shared-links .armory-mode-section-head {
    margin-bottom: 7px;
    padding-bottom: 6px;
  }

  #armoryView .armory-build-library-page .armory-mode-section-head h3,
  #armoryView .armory-shared-links .armory-mode-section-head h3 {
    font-size: 1rem;
  }

  #armoryView .armory-build-save-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 5px;
    padding: 6px;
  }

  #armoryView .armory-build-save-row input {
    grid-column: 1 / -1;
  }

  #armoryView .armory-build-save-row button {
    min-height: 34px;
  }

  #armoryView .armory-build-label,
  #armoryView .armory-shared-link-list article {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 7px;
  }

  #armoryView .armory-build-controls,
  #armoryView .armory-shared-link-list article > div:last-child {
    display: flex;
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #armoryView .armory-build-controls::-webkit-scrollbar,
  #armoryView .armory-shared-link-list article > div:last-child::-webkit-scrollbar {
    display: none;
  }

  #armoryView .armory-build-controls button,
  #armoryView .armory-shared-link-list button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 0.62rem;
  }
}

/* === Armory shared view split workspace · 2026-09-04 v22 ===
   Public/read-only builds should mirror the main dressing-room hierarchy:
   compact equipment + appearance on the left, calculated results on the right.
   Editing controls remain hidden and the mobile view stays stacked. */
@media (min-width: 981px) {
  #armoryView .armory-shared-results {
    width: 100%;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    width: min(calc(100% - 24px), 1520px);
    margin: 0 auto 8px;
    padding: 8px 12px 9px;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head .eyebrow {
    margin-bottom: 2px;
    font-size: 0.54rem;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head h3 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.05;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
    white-space: nowrap;
  }

  #armoryView .armory-shared-results .armory-workbench-body {
    display: grid;
    grid-template-columns: minmax(560px, 640px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    width: min(calc(100% - 24px), 1520px);
    margin: 0 auto;
  }

  #armoryView .armory-shared-results .armory-loadout {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px;
    justify-self: stretch;
  }

  #armoryView .armory-shared-results .armory-doll:not(.armory-figure-hidden) {
    width: 100%;
    margin: 0;
    grid-template-columns: 82px minmax(340px, 1fr) 82px;
    column-gap: 10px;
    align-items: stretch;
    justify-content: stretch;
  }

  #armoryView .armory-shared-results .armory-slot-column {
    gap: 5px;
    justify-items: center;
  }

  #armoryView .armory-shared-results .armory-slot-wrap {
    display: block;
    width: 82px;
  }

  #armoryView .armory-shared-results .armory-figure:has(.armory-figure-stage-curated) {
    height: 500px;
    min-height: 500px;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated {
    padding: 6px 2px 2px;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img {
    transform: scale(1.04);
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(1.04);
  }

  #armoryView .armory-shared-results .armory-summary {
    grid-column: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 10px;
    justify-self: stretch;
  }

  #armoryView .armory-shared-results .armory-summary > h3 {
    margin: 0;
    font-size: 1.14rem;
  }

  #armoryView .armory-shared-results .armory-build-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
  }

  #armoryView .armory-shared-results .armory-build-overview span {
    min-height: 34px;
    padding: 5px 7px;
    font-size: 0.76rem;
  }

  #armoryView .armory-shared-results .armory-build-overview b {
    font-size: 0.86rem;
  }

  #armoryView .armory-shared-results .armory-set-bonus {
    margin-top: 7px;
    padding: 8px;
  }

  #armoryView .armory-shared-results .armory-set-bonus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  #armoryView .armory-shared-results .armory-key-dashboard {
    gap: 8px;
    margin-top: 9px;
  }
}

@media (max-width: 980px) {
  #armoryView .armory-shared-results > .armory-shared-results-head {
    margin-bottom: 7px;
    padding: 8px;
  }

  #armoryView .armory-shared-results > .armory-shared-results-head h3 {
    font-size: 1.05rem;
  }

  #armoryView .armory-shared-results .armory-workbench-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #armoryView .armory-shared-results .armory-loadout,
  #armoryView .armory-shared-results .armory-summary {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* === Armory compact result cards + shared full-width detail flow · 2026-09-04 v23 ===
   Keep the important outcome visible as a small card grid. Deeper calculations,
   set bonuses and source-heavy sections live behind one disclosure. In shared
   view the compact result sits beside the loadout, while expanded detail spans
   the full workspace below both columns. */
#armoryView .armory-summary-compact {
  min-width: 0;
}

#armoryView .armory-summary-compact > h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.05;
}

#armoryView .armory-result-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

#armoryView .armory-glance-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: space-between;
  min-width: 0;
  min-height: 64px;
  padding: 8px 30px 8px 9px;
  border: 1px solid rgba(104, 78, 48, 0.16);
  border-radius: 8px;
  background: rgba(250, 248, 239, 0.72);
  box-shadow: 0 2px 7px rgba(69, 49, 30, 0.045);
}

#armoryView .armory-glance-card .armory-stat-name {
  min-width: 0;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.12;
}

#armoryView .armory-glance-card .armory-stat-name > small {
  display: none;
}

#armoryView .armory-glance-card > strong {
  align-self: end;
  margin-top: 6px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;
}

#armoryView .armory-glance-card.armory-glance-damage > strong {
  font-size: 1.18rem;
}

#armoryView .armory-glance-card .armory-info-button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex-basis: 18px;
  padding: 0;
  font-size: 0.62rem;
}

#armoryView .armory-result-details {
  margin-top: 8px;
  border: 1px solid rgba(97, 69, 40, 0.19);
  background: rgba(255, 250, 232, 0.48);
  box-shadow: 0 2px 8px rgba(70, 49, 29, 0.04);
}

#armoryView .armory-result-details > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px 7px 38px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 900;
}

#armoryView .armory-result-details > summary::-webkit-details-marker {
  display: none;
}

#armoryView .armory-result-details > summary::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: 10px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(112, 77, 44, 0.3);
  transform: translateY(-50%);
  font-size: 0.9rem;
  line-height: 1;
}

#armoryView .armory-result-details[open] > summary::before {
  content: "−";
}

#armoryView .armory-result-details > summary small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  text-align: right;
}

#armoryView .armory-result-details-body {
  padding: 0 8px 8px;
}

#armoryView .armory-result-details-body > .armory-set-bonus,
#armoryView .armory-result-details-body > .armory-key-dashboard,
#armoryView .armory-result-details-body > .armory-stat-details {
  margin-top: 8px;
}

@media (min-width: 981px) {
  /* Editing results also get the compact card dashboard; detailed math remains
     available in the disclosure without forcing the user to scroll through it. */
  #armoryView .armory-summary {
    padding: 10px;
  }

  #armoryView .armory-summary > h3 {
    display: none;
  }

  /* Shared build: left = loadout, right = compact result. The long detailed
     section begins below both, so the area below the left loadout is no longer
     wasted when the user opens more information. */
  #armoryView .armory-shared-results .armory-workbench-body {
    grid-template-columns: minmax(520px, 610px) minmax(0, 1fr);
    gap: 12px;
  }

  #armoryView .armory-shared-results .armory-loadout {
    grid-column: 1;
    grid-row: 1;
  }

  #armoryView .armory-shared-results .armory-summary {
    display: contents;
  }

  #armoryView .armory-shared-results .armory-summary-compact {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(91, 64, 36, 0.19);
    background: rgba(255, 250, 232, 0.48);
    box-shadow: 0 3px 10px rgba(70, 49, 29, 0.045);
  }

  #armoryView .armory-shared-results .armory-summary-compact > h3 {
    font-size: 1.05rem;
  }

  #armoryView .armory-shared-results .armory-build-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 7px;
  }

  #armoryView .armory-shared-results .armory-build-overview span {
    min-height: 31px;
    padding: 5px 6px;
    font-size: 0.68rem;
  }

  #armoryView .armory-shared-results .armory-build-overview b {
    font-size: 0.76rem;
  }

  #armoryView .armory-shared-results .armory-result-glance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #armoryView .armory-shared-results .armory-glance-card {
    min-height: 59px;
    padding: 7px 26px 7px 8px;
  }

  #armoryView .armory-shared-results .armory-glance-card .armory-stat-name {
    font-size: 0.61rem;
  }

  #armoryView .armory-shared-results .armory-glance-card > strong {
    font-size: 1rem;
  }

  #armoryView .armory-shared-results .armory-result-details {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #armoryView .armory-shared-results .armory-result-details > summary {
    min-height: 40px;
    padding: 8px 11px 8px 38px;
    font-size: 0.82rem;
  }

  #armoryView .armory-shared-results .armory-result-details[open] .armory-key-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #armoryView .armory-shared-results .armory-result-details[open] .armory-stat-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #armoryView .armory-summary-compact > h3 {
    font-size: 1rem;
  }

  #armoryView .armory-result-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  #armoryView .armory-glance-card {
    min-height: 58px;
    padding: 7px 27px 7px 8px;
  }

  #armoryView .armory-glance-card > strong {
    font-size: 1rem;
  }

  #armoryView .armory-result-details > summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  #armoryView .armory-result-details > summary small {
    padding-left: 27px;
    text-align: left;
  }

  #armoryView .armory-shared-results .armory-summary {
    display: block;
  }
}

/* === Armory focus + shared figure fit + single-line compact results · 2026-09-04 v24 ===
   Focus mode should remove editing chrome, not the character itself. Shared
   builds use a slightly reduced presentation scale so the prepared appearance
   canvas stays fully inside the compact left pane. On wide editable layouts,
   the headline result cards stay on one row instead of leaving one orphan card
   on a second line. */
#armoryView .armory-workbench.focus-mode .armory-figure {
  display: grid !important;
}

@media (min-width: 981px) {
  /* Keep every headline result visible in one clean desktop rail. Shared view
     intentionally keeps its denser multi-column grid in the right pane. */
  #armoryView .armory-workbench:not(.armory-shared-results) .armory-result-glance {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 5px;
  }

  #armoryView .armory-workbench:not(.armory-shared-results) .armory-result-glance > .armory-glance-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 7px;
    padding-right: 24px;
  }

  #armoryView .armory-workbench:not(.armory-shared-results) .armory-glance-card .armory-stat-name {
    font-size: clamp(0.54rem, 0.55vw, 0.66rem);
  }

  #armoryView .armory-workbench:not(.armory-shared-results) .armory-glance-card > strong {
    font-size: clamp(0.92rem, 0.86vw, 1.08rem);
  }

  /* The public/shared figure must be completely visible inside the compact
     left column. Editing keeps the stronger curated zoom from the main Armory. */
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img {
    transform: scale(0.92);
    transform-origin: 50% 50%;
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(0.92);
  }
}

@media (max-width: 980px) {
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img {
    transform: scale(0.96);
  }

  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-shared-results .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(0.96);
  }
}

/* === Armory phone-first repair · 2026-09-04 v25 ===
   Keep the desktop/shared presentation unchanged. On phones, collapse the
   command shell, show only one slot-control popover at a time, keep equipped
   items as clean two-column cards, and prevent the saved-build library from
   stretching cards to viewport-sized heights. */
@media (max-width: 680px) {
  /* Compact mobile command shell: search on one row, four actions below. */
  #armoryView .armory-mode-actions {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  #armoryView .armory-mode-actions > .armory-actions:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 6px !important;
    box-sizing: border-box;
  }

  #armoryView .armory-import-field {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  #armoryView .armory-import-field input {
    width: 100% !important;
    min-width: 0;
    min-height: 36px;
    height: 36px;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 7px !important;
    font-size: 0.65rem !important;
    line-height: 1.05;
    white-space: nowrap !important;
  }

  /* The Builds tab already explains itself. Do not reserve another tall copy
     panel between the tabs and the actual library. */
  #armoryView .armory-mode-actions:has(> [data-armory-mode-panel="builds"]:not(.hidden)) {
    display: none;
  }

  /* Slightly smaller appearance viewport for a phone: still prominent, but it
     no longer consumes the whole first screen before the item cards. */
  #armoryView .armory-figure:has(.armory-figure-stage-curated) {
    height: 390px;
    min-height: 390px;
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img {
    transform: scale(1.12);
  }

  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch9.png"],
  #armoryView .armory-figure-stage.armory-figure-stage-curated img[src*="/ch10.png"] {
    transform: translateX(3%) scale(1.12);
  }

  /* Equipped cards stay in two clean columns. The desktop quick-control rails
     are hidden until the slot itself is selected/tapped. */
  #armoryView .armory-slot-wrap-left,
  #armoryView .armory-slot-wrap-right {
    position: relative;
    display: block !important;
    width: 100%;
    min-width: 0;
  }

  #armoryView .armory-slot-wrap-left > .armory-slot,
  #armoryView .armory-slot-wrap-right > .armory-slot {
    display: grid;
    margin-inline: auto;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    display: none !important;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls {
    position: absolute !important;
    z-index: 45;
    top: 50%;
    display: grid !important;
    width: 57px;
    min-width: 57px;
    max-height: 88px;
    align-content: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(92, 65, 38, 0.28);
    border-radius: 9px;
    opacity: 1;
    background: rgba(255, 249, 229, 0.98);
    box-shadow: 0 8px 20px rgba(58, 40, 27, 0.2);
    pointer-events: auto;
    transform: translateY(-50%);
  }

  #armoryView .armory-slot-wrap-left:has(.armory-slot.active) > .armory-quick-item-controls {
    right: 2px;
    left: auto;
  }

  #armoryView .armory-slot-wrap-right:has(.armory-slot.active) > .armory-quick-item-controls {
    right: auto;
    left: 2px;
  }

  /* Keep the information affordance attached to the item card rather than
     floating out in the middle lane vacated by the old control rails. */
  #armoryView .armory-slot-mobile-info,
  #armoryView .armory-slot-wrap-right .armory-slot-mobile-info {
    right: calc(50% - 34px);
    bottom: 27px;
    left: auto;
  }

  /* Saved-build library: content-sized cards instead of tall stretched rows. */
  #armoryView .armory-build-library-page,
  #armoryView .armory-shared-links {
    margin-top: 0;
    padding: 8px;
  }

  #armoryView .armory-build-save-row {
    grid-template-columns: minmax(0, 1fr) 98px !important;
    grid-auto-rows: max-content;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    padding: 6px;
  }

  #armoryView .armory-build-save-row input {
    grid-column: 1 / -1;
  }

  #armoryView .armory-build-save-row button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    height: auto;
    padding: 5px 7px;
    font-size: 0.64rem;
    white-space: normal;
  }

  #armoryView .armory-build-save-row [data-armory-save-named] {
    grid-column: 1;
  }

  #armoryView .armory-build-save-row [data-armory-share-current] {
    grid-column: 2;
  }

  #armoryView .armory-build-list {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 6px;
    min-height: 0 !important;
    height: auto !important;
  }

  #armoryView .armory-build-label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: max-content;
    align-content: start !important;
    align-items: start !important;
    gap: 7px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    flex: none !important;
  }

  #armoryView .armory-build-identity {
    grid-template-columns: 24px minmax(0, 1fr);
    width: 100%;
    align-items: center;
  }

  #armoryView .armory-build-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    overflow: visible !important;
  }

  #armoryView .armory-build-controls button {
    width: 100%;
    min-width: 0;
    min-height: 31px;
    height: auto;
    padding: 4px 5px;
    font-size: 0.58rem;
    line-height: 1.08;
    white-space: normal;
  }

  #armoryView .armory-build-controls [data-armory-load-named] {
    grid-column: 1 / -1;
    order: -10;
  }

  #armoryView .armory-shared-link-list article {
    min-height: 0 !important;
    height: auto !important;
    align-content: start;
  }
}

@media (max-width: 390px) {
  #armoryView .armory-figure:has(.armory-figure-stage-curated) {
    height: 360px;
    min-height: 360px;
  }

  #armoryView .armory-mode-actions .action-btn,
  #armoryView .armory-mode-actions .ghost-btn {
    font-size: 0.61rem !important;
  }
}

/* === Armory mobile quick controls sheet · 2026-09-04 v26 ===
   On phones the quality/version/tier controls must never float in the lane
   between the two equipment columns. Keep them available, but render the
   selected slot controls as one compact fixed sheet above the bottom nav. */
@media (max-width: 680px) {
  #armoryView .armory-slot-wrap .armory-quick-item-controls {
    display: none !important;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls {
    position: fixed !important;
    z-index: 140 !important;
    top: auto !important;
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto !important;
    min-width: 0 !important;
    max-width: 430px !important;
    max-height: none !important;
    margin: 0 auto !important;
    align-content: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid rgba(83, 57, 34, 0.34) !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    background: rgba(255, 249, 229, 0.985) !important;
    box-shadow: 0 12px 30px rgba(48, 33, 22, 0.28) !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row + .armory-quick-control-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 4px !important;
    min-width: 0;
    min-height: 48px;
    padding: 5px !important;
    border: 1px solid rgba(92, 67, 39, 0.13) !important;
    border-radius: 8px !important;
    background: rgba(255, 252, 239, 0.78) !important;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row > span {
    display: block !important;
    overflow: hidden;
    color: rgba(63, 46, 31, 0.68);
    font-size: 0.5rem !important;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(28px, 1fr)) !important;
    justify-content: stretch !important;
    gap: 4px !important;
    min-width: 0;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row button {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border-radius: 7px !important;
    font-size: 0.78rem !important;
  }

  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-variant > button.variant {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.61rem !important;
    white-space: nowrap;
  }
}

/* === Armory mobile fitted quick controls · 2026-09-04 v27 ===
   Phones have enough horizontal room for the same fitted controls used on
   desktop. Keep one permanent quality/version/tier rail beside every equipped
   slot instead of opening a floating bottom sheet. */
@media (max-width: 680px) {
  #armoryView .armory-slot-wrap-left,
  #armoryView .armory-slot-wrap-right {
    position: relative;
    display: grid !important;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
  }

  #armoryView .armory-slot-wrap-left {
    grid-template-columns: minmax(82px, 1fr) 57px !important;
  }

  #armoryView .armory-slot-wrap-right {
    grid-template-columns: 57px minmax(82px, 1fr) !important;
  }

  #armoryView .armory-slot-wrap-left > .armory-slot {
    grid-column: 1;
    grid-row: 1;
    margin-inline: auto;
  }

  #armoryView .armory-slot-wrap-left > .armory-quick-item-controls {
    grid-column: 2;
    grid-row: 1;
  }

  #armoryView .armory-slot-wrap-right > .armory-quick-item-controls {
    grid-column: 1;
    grid-row: 1;
  }

  #armoryView .armory-slot-wrap-right > .armory-slot {
    grid-column: 2;
    grid-row: 1;
    margin-inline: auto;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls {
    position: static !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 57px !important;
    min-width: 57px !important;
    max-width: 57px !important;
    max-height: 88px !important;
    margin: 0 !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 4px !important;
    border: 1px solid rgba(92, 65, 38, 0.23) !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    background: rgba(255, 249, 229, 0.92) !important;
    box-shadow: 0 3px 8px rgba(58, 40, 27, 0.11) !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-control-row,
  #armoryView .armory-slot-wrap .armory-quick-control-row + .armory-quick-control-row,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row + .armory-quick-control-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-width: 0;
    min-height: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-control-row > span,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row > span {
    display: none !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-control-row > div,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row > div {
    display: grid !important;
    grid-template-columns: repeat(2, 23px) !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls .armory-quick-control-row button,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row button {
    display: grid !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    min-height: 23px !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-control-variant > button.variant,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-variant > button.variant {
    grid-column: 1 / -1;
    width: 49px !important;
    min-width: 49px !important;
    height: 23px !important;
    min-height: 23px !important;
    font-size: 0.54rem !important;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  #armoryView .armory-slot-wrap-left {
    grid-template-columns: minmax(76px, 1fr) 53px !important;
  }

  #armoryView .armory-slot-wrap-right {
    grid-template-columns: 53px minmax(76px, 1fr) !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls {
    width: 53px !important;
    min-width: 53px !important;
    max-width: 53px !important;
    padding: 3px !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-control-row > div,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row > div {
    grid-template-columns: repeat(2, 21px) !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-item-controls .armory-quick-control-row button,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-row button {
    width: 21px !important;
    min-width: 21px !important;
    height: 22px !important;
    min-height: 22px !important;
  }

  #armoryView .armory-slot-wrap .armory-quick-control-variant > button.variant,
  #armoryView .armory-slot-wrap:has(.armory-slot.active) > .armory-quick-item-controls .armory-quick-control-variant > button.variant {
    width: 45px !important;
    min-width: 45px !important;
  }
}

/* === Armory allocation responsive + appearance mastery total · 2026-09-06 v29 ===
   Keep the existing allocation design, but avoid the three-card desktop squeeze
   on 1366/1440-class laptops and reserve the fourth control cell for the
   appearance-adjusted mastery total. */
#armoryView .armory-manual-mastery .armory-manual-stat > div {
  grid-template-columns: 28px minmax(40px, 1fr) 28px minmax(44px, auto);
}

#armoryView .armory-mastery-total {
  position: relative;
  overflow: visible;
  cursor: help;
}

#armoryView .armory-mastery-total::after {
  content: attr(data-armory-appearance-bonus);
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: min(220px, 70vw);
  padding: 5px 8px;
  border: 1px solid rgba(84, 59, 35, 0.3);
  border-radius: 6px;
  background: rgba(255, 250, 231, 0.985);
  box-shadow: 0 8px 20px rgba(55, 38, 24, 0.2);
  color: #3f3024;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

#armoryView .armory-mastery-total:hover::after,
#armoryView .armory-mastery-total:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (min-width: 1180px) {
  #armoryView .armory-manual-mastery .armory-manual-stat > div {
    grid-template-columns: 25px 54px 25px 48px;
  }
}

/* The allocation panel lives inside the Armory workbench, so a 1366/1440px
   viewport does not actually leave enough container width for 230+360+390px.
   Stack the cards instead of allowing their fixed minimums to overlap. */
@media (min-width: 1180px) and (max-width: 1450px) {
  #armoryView .armory-manual-content {
    grid-template-columns: minmax(0, 1fr);
  }

  #armoryView .armory-manual-requirements {
    grid-column: auto;
  }
}

@media (max-width: 980px) {
  #armoryView .armory-manual-mastery .armory-manual-stat > div {
    grid-template-columns: 29px 49px 29px 44px;
  }
}

@media (max-width: 390px) {
  #armoryView .armory-manual-mastery .armory-manual-stat > div {
    grid-template-columns: 27px 45px 27px 40px;
  }
}