/* A page in the existing Castleward armory: stitched cloth, iron plaques and brass fittings. */
#armory-menu .armory-inner { --banner-width: min(408px, 43cqw); max-height: calc(100% - 20px); padding-top: 24px; padding-bottom: calc(var(--hem) + 18px); overflow: hidden; overscroll-behavior: contain; }
.armory-inner > *:not(.armory-scroll) { flex-shrink: 0; }
#armory-menu .armory-scroll { flex: 1 1 auto; min-height: 0; }
.armory-tabs { display: flex; gap: 0; margin: 8px 0 16px; border-bottom: 1px solid var(--heraldry-brass); }
.armory-tabs button { flex: 1; padding: 11px 8px; border: 0; border-bottom: 3px solid transparent; background: rgba(34, 29, 25, .55); color: var(--heraldry-cream); cursor: pointer; font: 400 17px/1 var(--font-inscription); letter-spacing: .04em; }
.armory-tabs button[aria-pressed='true'] { border-bottom-color: var(--heraldry-brass-light); background: linear-gradient(180deg, rgba(201,156,82,.2), rgba(34,29,25,.65)); color: var(--heraldry-brass-light); }
.heraldry-ledger { display: flex; justify-content: space-between; align-items: center; padding: 2px 0 11px; border-bottom: 1px solid rgba(234,220,182,.25); }
.heraldry-ledger > div { display: grid; gap: 4px; }
.heraldry-ledger > div:last-child { text-align: right; }
.heraldry-ledger small { color: var(--heraldry-cream); font: 700 10px/1 var(--font-script); letter-spacing: .15em; }
.heraldry-ledger strong { color: var(--heraldry-brass-light); font: 400 27px/1 var(--font-inscription); }
.cloth-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 8px 0 12px; }
.cloth-card { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 56px; padding: 6px; text-align: left; border: 1px solid rgba(201,156,82,.45); border-radius: 2px; background: linear-gradient(var(--heraldry-iron-light), var(--heraldry-iron)); color: var(--heraldry-cream); cursor: pointer; }
.cloth-card > span:last-child { min-width: 0; }
.cloth-card strong { display: block; font: 400 15px/1.12 var(--font-inscription); }
.cloth-card small { display: block; margin-top: 4px; font: 600 11px/1.1 var(--font-script); color: var(--heraldry-brass-light); }
.cloth-swatch { flex: 0 0 23px; height: 32px; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 35%, rgba(255,255,255,.12) 55%, rgba(0,0,0,.22)), var(--cloth-color); clip-path: polygon(0 0,100% 0,100% 77%,50% 100%,0 77%); }
.cloth-card[aria-checked='true'] { border-color: var(--heraldry-brass-light); box-shadow: inset 0 0 0 1px rgba(236,201,127,.35); background: linear-gradient(#554735, var(--heraldry-iron)); }
.cloth-card:hover { border-color: var(--heraldry-brass-light); }
.cloth-card:focus-visible, #cloth-action:focus-visible, .armory-tabs button:focus-visible, .renown-rules summary:focus-visible { outline: 2px solid var(--heraldry-magic); outline-offset: 3px; }
.emblem-mark { flex: 0 0 30px; height: 40px; display: grid; place-items: center; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 35%, rgba(255,255,255,.1) 55%, rgba(0,0,0,.22)), #79313b; clip-path: polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); }
.emblem-mark img, .emblem-mark svg { width: 24px; height: 34px; object-fit: contain; }
.emblem-mark.pending { clip-path: none; background: transparent; border: 1px dashed #c9aa7266; color: var(--heraldry-brass-light); font: 700 7px/1.3 var(--font-script); text-align: center; }
.emblem-card.locked .emblem-mark { filter: grayscale(.85) brightness(.7); }
.emblem-detail { margin-top: 2px; }
#emblem-name { margin: 0 0 5px; color: var(--heraldry-brass-light); font: 400 20px/1.1 var(--font-inscription); }
#emblem-description, #emblem-hint, #emblem-flavor { margin: 0; font: 500 13px/1.35 var(--font-script); color: var(--heraldry-cream); }
#emblem-flavor { margin-top: 6px; font-style: italic; color: #f3dfb0; }
#emblem-flavor:empty { display: none; }
#emblem-hint { margin-top: 9px; font-weight: 700; }
#emblem-action { margin-top: 10px; min-height: 40px; }
#emblem-action:disabled { opacity: .65; cursor: default; }
#emblem-action:focus-visible { outline: 2px solid var(--heraldry-magic); outline-offset: 3px; }
.cloth-detail { padding: 12px; background: rgba(34,29,25,.55); border: 1px solid rgba(201,156,82,.35); }
#cloth-name { margin: 0 0 5px; color: var(--heraldry-brass-light); font: 400 20px/1.1 var(--font-inscription); }
#cloth-description, #cloth-hint, #renown-status, .renown-rules p { margin: 0; font: 500 13px/1.35 var(--font-script); color: var(--heraldry-cream); }
#cloth-hint { margin-top: 9px; font-weight: 700; }
#cloth-progress { display: block; width: 100%; height: 6px; margin-top: 8px; border: 0; background: var(--heraldry-iron); accent-color: var(--heraldry-brass-light); }
#cloth-progress[hidden] { display: none; }
#cloth-progress::-webkit-progress-bar { background: var(--heraldry-iron); }
#cloth-progress::-webkit-progress-value { background: var(--heraldry-brass-light); }
#cloth-progress::-moz-progress-bar { background: var(--heraldry-brass-light); }
#cloth-action { margin-top: 10px; min-height: 40px; }
#cloth-action:disabled { opacity: .65; cursor: default; }
#renown-status { display: block; margin: 10px 0; min-height: 2.7em; color: #f3dfb0; }
.renown-rules { border-top: 1px solid rgba(234,220,182,.3); padding-top: 9px; }
.renown-rules summary { cursor: pointer; color: var(--heraldry-brass-light); font: 700 11px/1.4 var(--font-script); letter-spacing: .12em; }
.renown-rules p { margin-top: 8px; }
.renown-rules p span { float: right; color: var(--heraldry-brass-light); }
#renown-reward { color: var(--heraldry-brass-light); max-width: 38rem; margin: .8rem auto; font-family: var(--font-script); }
@media (prefers-reduced-motion: no-preference) {
  #armory-menu:not(.hidden) .armory-inner { animation: armory-arrive .28s ease-out both; }
  @keyframes armory-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@container app (max-height: 500px) {
  #armory-menu .armory-inner { --banner-width: min(390px, 51cqw); max-height: calc(100% - 12px); padding-top: 18px; }
  .armory-tabs { margin: 4px 0 8px; }
  .armory-tabs button { padding: 8px; font-size: 15px; }
  .cloth-card { min-height: 52px; padding: 6px; }
  .cloth-swatch { flex-basis: 19px; height: 26px; }
  .heraldry-ledger strong { font-size: 22px; }
}
@container app (max-width: 600px) and (min-height: 501px) {
  #armory-menu .armory-inner { --banner-width: calc(100cqw - 24px); left: 12px; padding: 22px 23px calc(var(--hem) + 20px); }
}

/* Siege shares the existing hanging-cloth Armory; no dormant 3D viewer. */
.armory-tabs button { min-width: 0; }
.siege-announcement { padding: 13px 12px; border: 1px solid rgba(201,156,82,.55);
  background: linear-gradient(145deg,rgba(110,38,35,.24),rgba(24,20,17,.7)); }
.siege-announcement h3 { margin: 0 0 7px; font: 400 21px/1.1 var(--font-inscription); color: var(--heraldry-brass-light); }
.siege-announcement p { margin: 0; color: var(--heraldry-cream); font: 500 12px/1.45 var(--font-script); }
.siege-armory-machines { display: grid; gap: 12px; margin-top: 12px; }
.siege-armory-card { padding: 11px; border: 1px solid rgba(201,156,82,.42);
  background: rgba(20,18,17,.52); }
.siege-armory-heading { display: flex; align-items: center; gap: 11px; }
.siege-armory-mark { flex: 0 0 56px; height: 54px; display: grid; place-items: center;
  border: 2px solid rgba(232,196,130,.6); background: linear-gradient(135deg,#46392b,#27221c);
  color: #d1ad70; font: 700 27px/1 var(--font-inscription); text-shadow: 0 2px 2px #0008; }
.siege-armory-heading h4 { margin: 3px 0; font: 400 22px/1 var(--font-inscription); color: #f1e4c2; }
.siege-armory-heading .armory-slot { margin: 0; }
.siege-armory-card > p:not(.armory-slot) { margin: 9px 0 5px; font: 500 13px/1.35 var(--font-script); color: var(--heraldry-cream); }
/* The synopsis is always visible; the authored lore unfolds on demand.
   Native details/summary is keyboard operable and survives skill re-renders. */
.siege-armory-preview {
  margin: 9px 0 3px !important;
  color: var(--heraldry-cream);
  font: 500 12px/1.4 var(--font-script);
}
.siege-armory-story { width: 100%; min-width: 0; margin: 7px 0 9px; }
.siege-armory-story summary {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px; padding: 7px 9px;
  border: 1px solid rgba(201,156,82,.40);
  background: rgba(32,26,20,.6);
  color: var(--heraldry-brass-light);
  font: 800 10px/1.2 var(--font-script);
  letter-spacing: .09em; list-style: none; cursor: pointer;
}
.siege-armory-story summary::-webkit-details-marker { display: none; }
.siege-armory-story summary:focus-visible {
  outline: 2px solid var(--heraldry-brass-light); outline-offset: 2px;
}
.siege-story-chevron { font: 900 19px/1 var(--font-script); transition: transform .16s ease; }
.siege-armory-story[open] .siege-story-chevron { transform: rotate(180deg); }
.siege-armory-story[open] summary { background: rgba(99,67,35,.18); }
.siege-armory-story .siege-armory-description {
  padding: 8px 9px 3px;
  border: 1px solid rgba(201,156,82,.22); border-top: 0;
  background: rgba(13,12,10,.3);
}
/* Longform machine lore belongs to the existing scrollable Armory cloth,
   never to a fixed-height or clipping description box. */
.siege-armory-description {min-width:0;max-width:100%;}
.siege-armory-description > p {
  margin:9px 0 5px;
  font:500 13px/1.42 var(--font-script);
  color:var(--heraldry-cream);
  white-space:normal;overflow-wrap:break-word;
}
.siege-armory-description-long > p {margin:0 0 12px;line-height:1.5;}
.siege-armory-description-long > p:first-child {
  color:var(--heraldry-brass-light);font-style:italic;
  font-weight:700;letter-spacing:.015em;
}
.siege-armory-description > p:last-child {margin-bottom:9px;}
.siege-armory-description em {font-style:italic;color:var(--heraldry-brass-light);}
.siege-armory-facts { color: var(--heraldry-brass-light); font: 700 11px/1.4 var(--font-script); }
.siege-armory-card .spell-card { grid-template-columns: minmax(0,1fr) auto; min-height: 56px; }
.siege-armory-card .spell-card small { grid-column: 1 / -1; }
.siege-armory-card .spell-card:disabled { opacity: 1; cursor: default; }
.siege-armory-card .spell-card:disabled:hover { background: linear-gradient(180deg,var(--heraldry-iron-light),var(--heraldry-iron)); }
@container app (max-width: 480px) { .armory-tabs button { padding: 9px 3px; font-size: 12px; letter-spacing: 0; } }

.siege-armory-mark svg { width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }

/* The long siege apparatus and Skill titles cannot claim more than the
   hanging-cloth page's actual text column, including landscape phones. */
.siege-armory-card,.siege-armory-heading,.siege-armory-card .spell-card {min-width:0;max-width:100%}
.siege-armory-heading > :not(.siege-armory-mark) {flex:1 1 auto;min-width:0;max-width:100%}
.siege-armory-heading h4,.siege-armory-card :is(p,small,.spell-name,.siege-armory-facts),
.siege-announcement p,.heraldry-ledger > div {
 min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;line-height:1.18
}


#armory-menu {--banner-width:min(530px,46cqw);}
@container app (max-height:500px){#armory-menu {--banner-width:min(490px,56cqw);}}
@container app (max-width:640px){#armory-menu {--banner-left:12px;--banner-width:calc(100cqw - 24px);}}
/* Armory ledger repair: a broad, tall standard with a permanent crown,
   accessible internal scrolling and no letter-by-letter tab breaking. */
#armory-menu .armory-inner {
  --banner-width:min(530px,46cqw);
  width:var(--banner-width);
  top:10px;height:calc(100% - 12px);max-height:calc(100% - 12px);
  padding:37px 25px calc(var(--hem) + 9px);
  overflow:hidden;
}
#armory-menu .armory-inner::before {inset:8px 8px calc(var(--hem) + 8px);}
#armory-menu .armory-tabs {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;margin:5px 0 11px;flex-shrink:0;min-width:0;
}
#armory-menu .armory-tabs button {
  display:grid;place-items:center;min-width:0;width:100%;max-width:100%;
  padding:11px 3px;min-height:50px;
  font:400 clamp(12px,1.15cqw,16px)/1.14 var(--font-inscription);
  letter-spacing:0;overflow-wrap:normal;word-break:keep-all;
  white-space:normal;text-wrap:balance;hyphens:none;
}
#armory-menu .armory-scroll {
  display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  flex:1 1 0;min-height:0;max-height:100%;scrollbar-width:thin;
  padding:0 9px 14px 0;scroll-padding-top:10px;
}
#armory-menu .armory-scroll :is(.spell-card,.siege-armory-card,.cloth-detail,.mastery-feat,.emblem-card) {
  min-width:0;max-width:100%;
}
#armory-menu .armory-scroll :is(h3,h4,p,small,strong,.spell-name,.mastery-feat-title,
  .mastery-condition,.mastery-flavor,.mastery-copy,.emblem-detail) {
  max-width:100%;min-width:0;white-space:normal;
  word-break:normal;overflow-wrap:break-word;hyphens:none;
  line-height:1.35;
}
#armory-menu .armory-scroll :is(.spell-card,.mastery-feat,.cloth-detail) {overflow:visible;}
#armory-menu .armory-scroll-hint {
  margin:7px 0 0;min-width:0;
  padding:8px 0 1px;min-height:28px;
  background:linear-gradient(180deg,#76221c,#692019);
  border-top:1px solid #e1c17a88;z-index:1;
}
#armory-menu .cloth-choices {gap:8px;}
#armory-menu .cloth-card {align-items:center;}
#armory-menu .cloth-card strong {font-size:clamp(12px,1.12cqw,15px);line-height:1.25;}
#armory-menu .emblem-card > span:last-child {min-width:0;flex:1;}
#armory-menu .mastery-feat-heading {flex-wrap:wrap;align-items:start;}
#armory-menu .mastery-feat-title {flex:1 1 170px;min-width:0;}
@container app (max-height:500px){
  #armory-menu .armory-inner {
    --banner-width:min(490px,56cqw);
    top:8px;height:calc(100% - 9px);max-height:calc(100% - 9px);
    padding:23px 20px calc(var(--hem) + 3px);
  }
  #armory-menu .armory-inner .back-button {margin-bottom:4px;}
  #armory-menu .armory-tabs {margin:3px 0 6px;}
  #armory-menu .armory-tabs button {min-height:36px;font-size:clamp(10px,1.08cqw,14px);padding:5px 2px;}
  #armory-menu .armory-scroll-hint {margin-top:3px;min-height:21px;padding:4px 0;}
}
@container app (max-width:640px){
  #armory-menu .armory-inner {
    --banner-width:calc(100cqw - 24px);width:var(--banner-width);
    left:12px;padding-left:21px;padding-right:21px;
  }
  #armory-menu .armory-tabs button {font-size:clamp(10px,2.3cqw,13px);}
  #armory-menu .cloth-choices {grid-template-columns:repeat(2,minmax(0,1fr));}
  #armory-menu .emblem-card {gap:5px;}
}
@container app (max-width:400px){
  #armory-menu .armory-inner {padding-left:15px;padding-right:15px;}
  #armory-menu .armory-tabs button {font-size:10px;letter-spacing:-.02em;padding:6px 1px;}
  #armory-menu .cloth-choices {grid-template-columns:minmax(0,1fr);}
}