/* The Armory: Dungeon Siege II's own look - dark leather, bronze and gold trim, parchment text.
   Frame art comes from the asset pack (/armory/media/ui/*.webp, the game's dialog pieces, tools/armory_media.py);
   without it every frame falls back to a plain bronze border. Item colours are the game's [tooltip_colors]
   (Logic.ds2res config/global_settings.gas): magic 0xff6699ff, rare 0xff00ffff, unique 0xffcc66ff, set 0xffffff00,
   required 0xffff0000, nature magic 0xff43ca83, combat magic 0xffeaa935. */
.armory-page {
  --a-bg: #0d0b09;
  --a-panel: #16120e;
  --a-panel-2: #1e1812;
  --a-line: #5b4527;
  --a-line-2: #8a6a3a;
  --a-gold: #d9b45b;
  --a-gold-2: #f2d791;
  --a-text: #ece3cf;
  --a-muted: #b8aa8c;
  --a-dim: #948670;
  --q-normal: #ece3cf;
  --q-magic: #6699ff;
  --q-rare: #00ffff;
  --q-unique: #cc66ff;
  --q-set: #ffff00;
  --q-req: #ff6a6a;
  --a-serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif;
  color-scheme: dark;
  background: var(--a-bg);
  color: var(--a-text);
  overflow-x: clip;
}
.armory-page .top { background: rgba(13, 11, 9, 0.9); border-bottom-color: #2c2218; }
.armory-page .top nav a { color: var(--a-muted); }
.armory-page .top nav a:hover, .armory-page .top nav a[aria-current="page"] { color: var(--a-text); background: #221b14; }
.armory-page .brand { color: var(--a-text); }
.armory-page .foot { border-top-color: #2c2218; color: var(--a-dim); }
.armory-page a { color: var(--a-gold-2); }
.armory-page .muted { color: var(--a-muted); }
.armory-page :focus-visible { outline: 2px solid var(--a-gold-2); outline-offset: 2px; }
.armory-page main.wrap { width: min(1240px, 100% - 32px); }
.armory-page h1, .armory-page h2, .armory-page h3 { font-family: var(--a-serif); }
.armory-page h2 { font-size: 1.35rem; color: var(--a-gold); margin: 0 0 12px; letter-spacing: 0.02em; }
.armory-page h3 { color: var(--a-gold-2); }
.armory-page .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* stage: the in-game scene behind the header, full width */
.arm-stage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); isolation: isolate; overflow: hidden;
  background: radial-gradient(1200px 520px at 50% 0, #3a2a17 0%, #1a130d 45%, var(--a-bg) 80%); }
.arm-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  z-index: -2; opacity: 0.62; }
.arm-stage::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 11, 9, 0.55) 0%, rgba(13, 11, 9, 0.15) 30%, rgba(13, 11, 9, 0.35) 70%,
  var(--a-bg) 100%), radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(13, 11, 9, 0.7) 100%); }
.arm-stage-in { width: min(1240px, 100% - 32px); margin: 0 auto; padding: 18px 0 0; }
.arm-stage-list .arm-stage-in { padding: 18px 0 36px; }
.arm-stage-doll .arm-stage-in { padding-bottom: 28px; }
.arm-stage-doll .arm-stage-bg { object-position: 50% 45%; opacity: 0.72; }
.arm-stage-doll .slot-btn { background: rgba(10, 8, 6, 0.55); }
.arm-stage-doll .slot-btn:hover, .arm-stage-doll .slot.open .slot-btn { background: rgba(40, 30, 18, 0.8); }
.arm-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.arm-topbar .crumbs { margin: 0; }
.armory-page .crumbs, .armory-page .crumbs a { color: var(--a-muted); }
.arm-account { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; text-decoration: none;
  color: var(--a-gold-2); background: rgba(13, 11, 9, 0.6); border: 1px solid var(--a-line); border-radius: 4px;
  padding: 4px 10px; }
.arm-account:hover { border-color: var(--a-gold); }
.arm-account .arm-glyph { width: 16px; height: 16px; fill: currentColor; }
.arm-body { padding: 8px 0 0; }

/* header: crest, name, level / class / party, gold */
.arm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  margin: 14px 0 10px; }
.arm-crest { position: relative; width: 92px; height: 92px; border-radius: 50%; padding: 5px;
  background: conic-gradient(from 210deg, #6d5028, #f2d791, #8a6a3a, #d9b45b, #5b4527, #f2d791, #6d5028);
  box-shadow: 0 0 0 2px #120e0a, 0 6px 22px rgba(0, 0, 0, 0.7); }
.arm-crest .arm-portrait { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  background: #120e0a; }
.arm-portrait-none { display: block; background: radial-gradient(circle at 50% 38%, #4a3a26 0 22%, transparent 23%),
  radial-gradient(ellipse at 50% 100%, #4a3a26 0 45%, transparent 46%), #1a140e; }
.arm-lvl { position: absolute; right: -4px; bottom: -4px; min-width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.95rem/1 var(--a-serif); color: #1a1208;
  background: radial-gradient(circle at 40% 35%, #fff1c2, #d9b45b 55%, #8a6a3a); border: 2px solid #120e0a; }
.arm-name { font-size: clamp(2rem, 3.6vw + 0.8rem, 3.1rem); color: var(--a-gold-2); margin: 0; line-height: 1.05;
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(0, 0, 0, 0.8); overflow-wrap: anywhere; letter-spacing: 0.01em; }
.arm-sub, .arm-sub2 { margin: 4px 0 0; text-shadow: 0 1px 2px #000; }
.arm-sub { font-size: 1.05rem; }
.arm-sub2 { color: var(--a-muted); font-size: 0.95rem; }
.arm-party { color: var(--a-gold); }
.arm-gold { display: flex; align-items: center; gap: 6px; font: 600 1.15rem var(--a-serif); color: var(--a-gold-2);
  text-shadow: 0 1px 2px #000; white-space: nowrap; }
.arm-glyph { width: 22px; height: 22px; fill: currentColor; flex: none; }
.arm-glyph.gold { fill: #d9b45b; }
.arm-glyph.gold .g2 { fill: #8a6a3a; }
.armory-page .tag { color: var(--a-text); }
.armory-page .tag.ds2::before { background: #3987e5; }
.armory-page .tag.bw::before { background: #9085e9; }

/* tabs (WoW-style row of uppercase links) */
.arm-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; border-bottom: 1px solid var(--a-line); margin: 8px 0 0;
  padding-bottom: 8px; }
.arm-tabs a { font: 700 0.82rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  color: var(--a-gold); padding: 9px 12px; border: 1px solid transparent; border-radius: 3px; }
.arm-tabs a:hover { color: var(--a-gold-2); border-color: var(--a-line); }
.arm-tabs a[aria-current="page"], .arm-tabs a[aria-selected="true"] { color: #1a1208; background: linear-gradient(#f2d791, #c9973d);
  border-color: #f2d791; box-shadow: 0 0 12px rgba(217, 180, 91, 0.35); }
.arm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.arm-chips .chip { font-size: 0.85rem; font-weight: 600; text-decoration: none; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--a-line); color: var(--a-text); background: var(--a-panel-2); }
.arm-chips .chip.locked { color: var(--a-dim); }
.arm-chips .chip.done::after { content: " \2713"; color: var(--a-gold); }
.arm-chips .chip[aria-current="true"], .arm-chips .chip[aria-selected="true"] { border-color: var(--a-gold); color: var(--a-gold-2); background: #2b2014; }

/* panels: the game's inner dialog frame */
.arm-panel, .armory-page .armory-privacy { background: var(--a-panel); border: 2px solid var(--a-line); border-radius: 4px;
  padding: 16px 18px; margin: 18px 0; border-image: url(/armory/media/ui/inner.webp) 16 fill / 10px round;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); }
.armory-page .armory-privacy { border-left-width: 2px; color: var(--a-muted); }
.armory-page .armory-privacy h2 { font-size: 1.1rem; margin-top: 0; }
.arm-section { margin: 22px 0; }
.arm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 18px; }
.arm-updated { margin-top: 18px; }
/* a tab or the list's results being fetched (armory.js; only visible when it takes a moment) */
.arm-panes.arm-busy, .arm-results[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s 0.1s; }
.arm-empty p:last-child { margin: 0; }

/* paper doll */
.arm-doll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "left model right" "bottom bottom bottom"; gap: 14px 22px; margin: 22px 0 8px; align-items: start; }
.doll-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doll-left { grid-area: left; }
.doll-right { grid-area: right; }
.doll-bottom { grid-area: bottom; flex-direction: row; justify-content: center; gap: 22px; flex-wrap: wrap; }
.doll-bottom .slot { width: min(100%, 330px); }
/* centre: the 3D viewer (armory-viewer.js/.css) in the game's dialog frame, the portrait behind it until it draws */
.arm-model { grid-area: model; position: relative; min-height: 470px; border: 3px solid var(--a-line-2);
  border-image: url(/armory/media/ui/frame.webp) 128 64 64 64 / 54px 27px 27px 27px round;
  background: radial-gradient(ellipse at 50% 70%, rgba(217, 180, 91, 0.10), rgba(10, 8, 6, 0.25) 60%, rgba(10, 8, 6, 0.55));
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column;
  padding: 46px 22px 22px; }   /* the frame art (border-image-width) is wider than the border: keep the viewer inside */
.arm-model .armory-model { position: relative; z-index: 1; flex: 1; margin: 0; max-width: none; width: 100%; }
.arm-model .armory-model.av { margin: 0; max-width: none; }
.arm-model .av-stage { border-radius: 0; max-height: none; background: none; }
.arm-model .av-still .av-stage { background: none; }
.arm-model .av-status { color: var(--a-text); text-shadow: 0 1px 3px #000; align-items: flex-end; }
.arm-model .av-bar { padding: 0 6px 6px; }
.arm-model .av-anim, .arm-model .av-btn { background: rgba(13, 11, 9, 0.85); border-color: var(--a-line); color: var(--a-text); }
.arm-model:has(.armory-model[data-av-state="ready"]) .arm-model-ph { display: none; }
.arm-model-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.arm-model-ph .arm-model-portrait { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; opacity: 0.9;
  box-shadow: 0 0 0 3px #120e0a, 0 0 0 6px #8a6a3a, 0 0 60px rgba(217, 180, 91, 0.25); grid-area: 1 / 1; }
.arm-model-ring { grid-area: 1 / 1; width: 230px; height: 230px; border-radius: 50%; border: 1px solid rgba(217, 180, 91, 0.35);
  box-shadow: inset 0 0 40px rgba(217, 180, 91, 0.1); }
.slot { position: relative; }
.slot-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; cursor: default;
  padding: 4px; border-radius: 4px; }
.slot-btn:hover, .slot-btn:focus-visible, .slot.open .slot-btn { background: rgba(217, 180, 91, 0.08); }
.slot-btn:focus-visible { outline: 2px solid var(--a-gold-2); }
.doll-right .slot-btn { flex-direction: row-reverse; text-align: right; }
.slot-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.slot-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-dim); }
.item-name { font-weight: 600; overflow-wrap: anywhere; text-shadow: 0 1px 2px #000; }
.slot-meta, .slot-empty { font-size: 0.82rem; color: var(--a-muted); }
.slot-empty { font-style: italic; }
.q-normal { color: var(--q-normal); } .q-magic { color: var(--q-magic); } .q-rare { color: var(--q-rare); }
.q-unique { color: var(--q-unique); } .q-set { color: var(--q-set); }

/* icons: the game's inventory art in a bronze socket, border in the item's colour */
.icon { flex: none; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2b2218, #0c0a07);
  border: 2px solid #3f3120; border-radius: 4px; box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6);
  overflow: hidden; }
.icon-m { width: 54px; height: 54px; }
.icon-l { width: 58px; height: 58px; }
.icon .icon-img { max-width: calc(100% - 6px); max-height: calc(100% - 6px); width: auto; height: auto;
  image-rendering: auto; }
.icon.q-magic { border-color: #3c5ea8; } .icon.q-rare { border-color: #1f9e9e; } .icon.q-unique { border-color: #8a46b0; }
.icon.q-set { border-color: #a8a020; } .icon.q-power { border-color: #6d5028; }
.icon-none { width: 60%; height: 60%; border-radius: 3px; background: repeating-linear-gradient(45deg, #1f1912 0 4px, #18130e 4px 8px); }
.slot.slot-none .icon { opacity: 0.55; }

/* tooltips: the game's rollover - a near-black box with a thin bronze frame */
.itip { display: none; position: absolute; z-index: 30; top: 0; left: calc(100% + 8px); width: 300px; max-width: 86vw;
  padding: 10px 12px; background: rgba(9, 7, 5, 0.97); border: 1px solid var(--a-line-2); border-radius: 3px;
  border-image: url(/armory/media/ui/inner.webp) 16 fill / 8px round; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
  font-size: 0.9rem; line-height: 1.35; text-align: left; pointer-events: none; }
.doll-right .itip { left: auto; right: calc(100% + 8px); }
.doll-bottom .itip, .cell .itip { top: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.slot:hover > .itip, .slot:focus-within > .itip, .slot.open > .itip,
.cell:hover > .itip, .cell:focus-within > .itip, .cell.open > .itip { display: block; }
.itip.flip-x { left: auto; right: 0; transform: none; }
.itip.flip-x-l { left: 0; right: auto; transform: none; }
.itip.flip-y { bottom: auto; top: calc(100% + 8px); }
.tip-name { font: 700 1.02rem/1.25 var(--a-serif); }
/* header: the item's icon in its socket beside name and kind; under it a weapon or shield in 3D (armory-tip3d.js) */
.tip-head { display: flex; gap: 10px; align-items: flex-start; }
.tip-title { min-width: 0; flex: 1; }
.icon-s { width: 46px; height: 46px; }
.icon.round { border-radius: 50%; }
.tip-3d { height: 140px; margin: 8px 0 2px; border: 1px solid #3a2d1c; border-radius: 3px;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(217, 180, 91, 0.16), rgba(9, 7, 5, 0) 75%), #0c0a07; }
.tip-3d-canvas { display: block; width: 100%; height: 100%; }
.tip-custom { color: var(--a-gold-2); font-style: italic; }
.tip-kind, .tip-line { color: var(--a-muted); }
.tip-stat { margin-top: 4px; }
.tip-stat b { color: #fff; }
.tip-fx, .tip-setl { list-style: none; padding: 0; margin: 6px 0 0; }
.tip-fx li { color: var(--q-magic); margin: 1px 0; }
.tip-set { margin-top: 8px; color: var(--q-set); font-weight: 600; }
.tip-setb { color: var(--a-muted); font-size: 0.85rem; margin-top: 2px; }
.tip-setl li { color: var(--a-dim); margin: 1px 0; font-size: 0.85rem; }
.tip-setl li.on { color: var(--q-set); }
.tip-setl li span { color: inherit; font-weight: 600; }
.tip-req { color: var(--a-text); margin-top: 4px; font-size: 0.86rem; }
.tip-desc { color: var(--a-muted); font-style: italic; margin: 6px 0 0; }
.tip-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid #3a2d1c; color: var(--a-dim); font-size: 0.82rem; }
.tip-value { color: var(--a-gold); }

/* attribute tiles (health, mana, the three attributes) and the four skill lines */
.arm-stats { margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--a-line); }
.stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  margin: 0; }
.stat .arm-glyph { grid-row: 1 / 3; width: 44px; height: 44px; padding: 9px; border-radius: 50%; border: 2px solid;
  box-sizing: border-box; }
.stat-v { font: 700 1.35rem/1.1 var(--a-serif); font-variant-numeric: tabular-nums; }
.stat-k { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-text); }
.stat-health .arm-glyph { fill: #e05050; border-color: #a02a2a; background: #2a0e0e; } .stat-health .stat-v { color: #ff8a80; }
.stat-mana .arm-glyph { fill: #5d8bff; border-color: #2e4fa0; background: #0e1630; } .stat-mana .stat-v { color: #9db8ff; }
.stat-strength .arm-glyph { fill: #e8a04a; border-color: #95601f; background: #2a1a0b; } .stat-strength .stat-v { color: #f1c27d; }
.stat-dexterity .arm-glyph { fill: #6fd08c; border-color: #2f7d47; background: #0d2416; } .stat-dexterity .stat-v { color: #a5e8b8; }
.stat-intelligence .arm-glyph { fill: #c08cff; border-color: #6c3fa8; background: #1d1230; } .stat-intelligence .stat-v { color: #d9bbff; }
.slines { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
.sline { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; margin: 0; }
.sline .arm-glyph { grid-row: 1 / 3; width: 26px; height: 26px; fill: var(--a-gold); stroke: var(--a-gold); stroke-width: 0; }
.sline-k { font-weight: 600; font-size: 0.92rem; }
.sline-v { font: 700 1.05rem var(--a-serif); color: var(--a-gold-2); }
.sline .arm-bar { grid-column: 2 / 4; }
.arm-points { margin: 10px 0 0; }
.arm-bar { display: block; width: 100%; height: 8px; }
.arm-bar-bg { fill: #2a2118; }
.arm-bar-fill { fill: #c9973d; }

/* icon cells (powers, spells, the pack) */
.cells { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cell { position: relative; margin: 0; }
.cell-btn { all: unset; position: relative; display: block; border-radius: 4px; cursor: default; }
.cell-btn:focus-visible { outline: 2px solid var(--a-gold-2); outline-offset: 2px; }
.cell-btn:hover .icon, .cell.open .icon { border-color: var(--a-gold); }
.cell-count { position: absolute; right: 3px; bottom: 2px; font: 700 0.75rem/1 var(--sans); color: #fff;
  text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 4px #000; }
.cell-slot { position: absolute; left: 4px; top: 3px; font: 700 0.7rem/1 var(--sans); color: var(--a-gold-2);
  text-shadow: 0 0 3px #000; }
.cell.power.skill .icon { border-radius: 50%; }

/* progress: act cards (like raid cards), rows per difficulty */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.act-card { background: var(--a-panel); border: 2px solid var(--a-line); border-radius: 4px; overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); }
.act-img { display: block; width: 100%; aspect-ratio: 16 / 6.5; object-fit: cover; border-bottom: 1px solid var(--a-line); }
.act-img-none { background: linear-gradient(135deg, #3a2a17, #15100b 60%), #15100b; }
.act-body { padding: 12px 16px 14px; }
.act-body h3 { margin: 0; font-size: 1.25rem; }
.act-title { margin: 0 0 10px; color: var(--a-muted); font-size: 0.92rem; }
.act-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.act-row { display: grid; grid-template-columns: 6.2em 1fr; grid-template-rows: auto auto; column-gap: 10px; margin: 0; }
.act-diff { grid-row: 1 / 3; align-self: center; font: 700 0.75rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--a-gold); }
.act-row.locked .act-diff { color: var(--a-dim); }
.act-meter { position: relative; display: block; height: 22px; border: 1px solid #3a2d1c; border-radius: 2px; background: #0b0907; }
.act-meter .arm-bar { height: 100%; }
.act-meter .arm-bar-bg { fill: transparent; }
.act-meter .arm-bar-fill { fill: #8a6428; }
.act-num { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font: 700 0.82rem var(--sans); color: #fff;
  text-shadow: 0 1px 2px #000; }
.act-side { font-size: 0.8rem; color: var(--a-muted); }
.qlog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 6px 22px; }
.qlog-act h3 { font-size: 1.05rem; margin: 6px 0; }
.qlog { list-style: none; padding: 0; margin: 0 0 8px; }
.qlog li { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; font-size: 0.93rem; }
.qmark { flex: none; width: 10px; height: 10px; transform: rotate(45deg) translateY(-1px); border: 1px solid var(--a-line-2); }
.qlog li.done .qmark { background: var(--a-gold); border-color: var(--a-gold-2); }
.qlog li.open { color: var(--a-muted); }
.armory-page .pill { background: var(--a-panel-2); border-color: var(--a-line); color: var(--a-text); font-family: var(--sans);
  vertical-align: middle; font-size: 0.78rem; }
.armory-page .pill.ok { color: var(--a-gold-2); border-color: var(--a-gold); }
.armory-page .pill.locked { color: var(--a-dim); }

/* achievements: tiles with progress rings */
.ach-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr)); gap: 14px; }
.ach { margin: 0; text-align: center; padding: 18px 10px 14px; background: linear-gradient(#1a140f, #120e0a);
  border: 2px solid #3a2d1c; border-radius: 4px; border-image: url(/armory/media/ui/inner.webp) 16 fill / 8px round; }
.ach-ring { position: relative; width: 112px; height: 112px; margin: 0 auto 6px; display: grid; place-items: center; }
.arm-ring { width: 100%; height: 100%; grid-area: 1 / 1; }
.arm-ring-bg { fill: #0b0907; stroke: #2a2118; stroke-width: 10; }
.arm-ring-fg { fill: none; stroke: #b07a2e; stroke-width: 10; stroke-linecap: round; }
.arm-ring-fg.full { stroke: #e3b04f; }
.ach-pct { grid-area: 1 / 1; font: 700 1.15rem var(--sans); color: var(--a-text); }
.ach h3 { margin: 4px 0 2px; font-size: 1.05rem; color: var(--a-gold); }
.ach-n { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ach-what { margin: 0; font-size: 0.8rem; color: var(--a-muted); }
.ach.feat .ach-ring { border-radius: 50%; background: radial-gradient(circle, #3a2c1a, #120e0a 70%); border: 3px double var(--a-line-2); }
.feat-glyph { width: 52px; height: 52px; fill: var(--a-gold); }
.arm-table { overflow-x: auto; }
.arm-table table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.arm-table th, .arm-table td { border-bottom: 1px solid #3a2d1c; padding: 8px 10px; text-align: left; background: none; color: var(--a-text); }
.arm-table thead th { color: var(--a-gold); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.arm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.arm-details { margin-top: 10px; }
.arm-details summary { cursor: pointer; color: var(--a-gold-2); }

/* collections: cards (bestiary, pets, companions) */
.card-grid { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 138px), 1fr)); gap: 10px; }
.card-c { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px;
  background: linear-gradient(#1c1610, #110d09); border: 1px solid #3a2d1c; border-radius: 4px; }
.card-c .card-img { width: 64px; height: 64px; object-fit: contain; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5b4527; }
.card-c .arm-portrait-none { width: 64px; height: 64px; border-radius: 4px; }
.card-name { font-weight: 600; font-size: 0.92rem; color: var(--a-gold-2); overflow-wrap: anywhere; }
.card-sub { font-size: 0.78rem; color: var(--a-muted); }
.card-c.locked { opacity: 0.75; }
.card-c.locked .card-img { filter: grayscale(1) brightness(0.55); }
.card-c.locked .card-name { color: var(--a-muted); }
.beast summary { display: grid; grid-template-columns: auto auto minmax(80px, 1fr); gap: 12px; align-items: center;
  padding: 8px 0; font: 600 1.05rem var(--a-serif); }
.beast summary .beast-n { font: 600 0.85rem var(--sans); color: var(--a-muted); }

/* party */
.members { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.member { margin: 0; display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--a-panel-2);
  border: 1px solid #3a2d1c; border-radius: 4px; }
.member.me { border-color: var(--a-gold); box-shadow: 0 0 14px rgba(217, 180, 91, 0.2); }
.member .member-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #000, 0 0 0 4px #8a6a3a; }
.member h3 { margin: 0; font-size: 1.1rem; }
.member p { margin: 0; }
.facts-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 18px; margin: 0; }
.facts-dl dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-dim); }
.facts-dl dd { margin: 0; font-weight: 600; }

/* the list: search banner and armory-search rows */
.arm-lead { max-width: 46em; color: var(--a-text); text-shadow: 0 1px 2px #000; font-size: 1.08rem; }
.arm-mine { margin: 0 0 10px; text-shadow: 0 1px 2px #000; }
.arm-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 900px; margin-top: 14px; }
.arm-q input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.08rem; color: var(--a-text);
  background: rgba(10, 8, 6, 0.88); border: 2px solid var(--a-line-2); border-radius: 4px; padding: 12px 14px 12px 42px;
  background-image: radial-gradient(circle at 21px 50%, transparent 6px, var(--a-gold) 6.5px 8px, transparent 8.5px); }
.arm-q input::placeholder { color: var(--a-dim); }
.arm-q input:focus { border-color: var(--a-gold); outline: none; box-shadow: 0 0 0 3px rgba(217, 180, 91, 0.25); }
.arm-btn { font: 700 0.9rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; color: #1a1208;
  background: linear-gradient(#f2d791, #c9973d); border: 1px solid #f2d791; border-radius: 4px; padding: 0 22px; }
.arm-btn:hover { filter: brightness(1.08); }
.arm-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.arm-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--a-text); text-shadow: 0 1px 2px #000; }
.arm-filters input, .arm-filters select { font: inherit; font-size: 0.92rem; color: var(--a-text); background: rgba(10, 8, 6, 0.88);
  border: 1px solid var(--a-line); border-radius: 3px; padding: 6px 8px; min-width: 0; }
.arm-filters input[type="number"] { width: 5.5em; }
.arm-count { color: var(--a-muted); margin: 18px 0 8px; }
.arm-rows-head, .arm-row { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 12px; align-items: center; }
.arm-rows-head { padding: 0 14px 6px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-dim); }
.arm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arm-row { position: relative; margin: 0; padding: 8px 14px; background: linear-gradient(90deg, #1d1711, #120e0a);
  border: 1px solid #3a2d1c; border-radius: 4px; font-size: 0.9rem; }
.arm-row:hover, .arm-row:focus-within { border-color: var(--a-gold); background: linear-gradient(90deg, #2a2016, #15110c); }
.arm-row > span:first-child { display: flex; }
.arm-avatar { position: relative; flex: none; width: 52px; height: 52px; }
.arm-row { grid-template-columns: 52px minmax(0, 2.3fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.arm-rows-head { grid-template-columns: 52px minmax(0, 2.3fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.arm-rows-head span:first-child { grid-column: 1 / 3; }
.arm-avatar-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px #000, 0 0 0 3px #8a6a3a; }
.arm-avatar .arm-portrait-none { width: 52px; height: 52px; border-radius: 50%; }
.lvl-badge { position: absolute; right: -6px; bottom: -4px; min-width: 24px; height: 24px; padding: 0 3px; box-sizing: border-box;
  border-radius: 12px; display: grid; place-items: center; font: 700 0.75rem/1 var(--sans); color: #1a1208;
  background: radial-gradient(circle at 40% 35%, #fff1c2, #d9b45b 60%, #8a6a3a); border: 2px solid #120e0a; }
.arm-row-main { display: flex; flex-direction: column; min-width: 0; }
.arm-row-link { font: 700 1.05rem var(--a-serif); color: var(--a-gold-2); text-decoration: none; overflow-wrap: anywhere; }
.arm-row-link::after { content: ""; position: absolute; inset: 0; }
.arm-row-link:focus-visible { outline: none; }
.arm-row:focus-within { box-shadow: 0 0 0 2px var(--a-gold-2); }
.arm-row-sub { color: var(--a-muted); font-size: 0.85rem; }
.arm-row-party { color: var(--a-gold); overflow-wrap: anywhere; }
.arm-row-where, .arm-row-player, .arm-row-time { color: var(--a-text); overflow-wrap: anywhere; }
.arm-row-time { color: var(--a-muted); }
.armory-page .pager a { color: var(--a-gold-2); }

/* narrower screens */
@media (max-width: 1000px) {
  .arm-row, .arm-rows-head { grid-template-columns: 52px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .arm-row-ed, .arm-row-time, .arm-rows-head span:nth-child(3), .arm-rows-head span:nth-child(6) { display: none; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .arm-doll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "model model" "left right" "bottom bottom"; }
  .arm-model { min-height: 320px; }
  .arm-head { grid-template-columns: auto minmax(0, 1fr); }
  .arm-gold { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .arm-rows-head { display: none; }
  .arm-row { grid-template-columns: 52px minmax(0, 1fr); row-gap: 2px; }
  .arm-row > :nth-child(n+3) { grid-column: 2; font-size: 0.84rem; }
  .arm-row-ed, .arm-row-time { display: block; }
  .arm-row-where, .arm-row-player { display: none; }
  .arm-doll { grid-template-columns: minmax(0, 1fr); grid-template-areas: "model" "left" "right" "bottom"; }
  .doll-right .slot-btn { flex-direction: row; text-align: left; }
  .arm-model { min-height: 260px; }
  .arm-crest { width: 68px; height: 68px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arm-search { grid-template-columns: minmax(0, 1fr); }
  .arm-btn { padding: 10px; }
  /* touch: the tooltip becomes a sheet at the bottom of the screen */
  .itip, .doll-right .itip, .doll-bottom .itip, .cell .itip, .itip.flip-x, .itip.flip-y {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; transform: none;
    max-height: 60vh; overflow: auto; }
  .arm-tabs a { padding: 8px 9px; font-size: 0.75rem; }
}
@media (forced-colors: active) {
  .arm-bar-fill, .arm-ring-fg { fill: CanvasText; stroke: CanvasText; }
  .arm-tabs a[aria-current="page"], .arm-tabs a[aria-selected="true"] { border: 2px solid CanvasText; }
}
@media print { .arm-stage-bg, .itip { display: none !important; } }