/* Item card: the game's cream item tooltip (docs/design/DESIGN-SYSTEM.md "Cream detail card").
   One stylesheet for hover tooltips (item-tooltip.js), the embed widget (/items/card.html) and the
   offline PNG renderer (scripts/items/render-cards.mjs). Everything is sized in em off the card's
   font-size, so `font-size` on .arc-card scales the whole card. Tokens are local to the card so it
   renders the same on any page. */
.arc-card, .arc-tile, .arc-grid {
  --paper: #f8ede1;
  --paper-2: #ebdfd1;
  --ink: #0d111b;
  --ink-2: #3a404c;
  --muted: #8a8679;
  --rule: #d9cdbf;
  --track: #cdc6bb;
  --r-common: #6e7687;
  --r-uncommon: #22c464;
  --r-rare: #1f9cf0;
  --r-epic: #d81f8c;
  --r-legendary: #ffbf1a;
  --r-amplified: #f0861e;
  --rc: var(--r-common);
  --f-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.arc-card[data-rarity="uncommon"], .arc-tile[data-rarity="uncommon"] { --rc: var(--r-uncommon); }
.arc-card[data-rarity="rare"], .arc-tile[data-rarity="rare"] { --rc: var(--r-rare); }
.arc-card[data-rarity="epic"], .arc-tile[data-rarity="epic"] { --rc: var(--r-epic); }
.arc-card[data-rarity="legendary"], .arc-tile[data-rarity="legendary"] { --rc: var(--r-legendary); }
.arc-card[data-rarity="amplified"], .arc-tile[data-rarity="amplified"] { --rc: var(--r-amplified); }

.arc-card {
  box-sizing: border-box;
  width: 23.75em;
  font: 400 16px/1.3 var(--f-ui);
  color: var(--ink);
  background: var(--paper);
  border-radius: .5em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.arc-card *, .arc-card *::before, .arc-card *::after { box-sizing: border-box; }
.arc-card .ac-body { padding: 1.15em 1.3em 1em; }

/* tag chips: [glyph | TYPE] [RARITY] */
.arc-card .ac-tags { display: flex; flex-wrap: wrap; gap: .19em; margin: 0 0 .55em; }
.arc-card .ac-chip {
  display: inline-flex; align-items: center; gap: .35em;
  height: 1.5em; padding: 0 .42em;
  border-radius: .12em;
  background: var(--rc); color: #fff;
  font: 500 .95em/1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.arc-card[data-rarity="legendary"] .ac-chip { color: var(--ink); }
.arc-card .ac-chip img { width: 1.05em; height: 1.05em; object-fit: contain; margin-left: -.1em; }
.arc-card[data-rarity="legendary"] .ac-chip img, .arc-card[data-rarity="amplified"] .ac-chip img { filter: brightness(0); }

.arc-card .ac-head { display: flex; align-items: flex-start; gap: .75em; }
.arc-card .ac-name {
  flex: 1; margin: 0 0 .3em;
  font: 700 1.6em/1.1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase;
}
.arc-card .ac-icon {
  flex: none; width: 4.2em; height: 4.2em; margin: -.2em -.2em .2em 0;
  object-fit: contain;
}
.arc-card .ac-desc { margin: 0 0 .8em; font-size: 1.1em; line-height: 1.35; color: var(--ink-2); }
/* amplification list (amplified weapons), between rules like the game tooltip: icon + name, two per line */
.arc-card .ac-amp {
  display: flex; flex-wrap: wrap; gap: .45em 1.1em; margin: 0 0 .9em; padding: .6em 0; list-style: none;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.arc-card .ac-amp li { display: inline-flex; align-items: center; gap: .45em; font-size: 1.02em; color: var(--ink); }
.arc-card .ac-amp img { width: 1.3em; height: 1.3em; object-fit: contain; filter: brightness(0); }

/* property rows: label left, value right */
.arc-card .ac-rows { margin: 0 0 .9em; padding: 0; list-style: none; }
.arc-card .ac-rows li {
  display: flex; justify-content: space-between; align-items: center; gap: .75em;
  padding: .5em 0; border-bottom: 1px solid var(--rule); font-size: 1em;
}
.arc-card .ac-rows li:first-child { border-top: 0; }
.arc-card .ac-rows b { font-weight: 500; display: inline-flex; align-items: center; gap: .35em; text-align: right; }
.arc-card .ac-rows b img { width: 1.1em; height: 1.1em; object-fit: contain; filter: brightness(0); }

/* weapon stat bars, two columns */
.arc-card .ac-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .45em 1.2em; margin: 0 0 1em; }
.arc-card .ac-bar span { display: block; font-size: 1em; margin-bottom: .2em; }
.arc-card .ac-bar i {
  display: block; height: .5em; border-radius: .25em;
  background: linear-gradient(90deg, var(--ink) 0 var(--v), var(--track) var(--v) 100%);
}

.arc-card .ac-sub {
  margin: .2em 0 .35em; font: 600 1.05em/1.1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted);
}
.arc-card .ac-sub.ink { color: var(--ink); font-weight: 700; }
.arc-card .ac-fx { margin: 0 0 .8em; padding: 0; list-style: none; }
.arc-card .ac-fx li { padding: .45em 0; border-bottom: 1px solid var(--rule); }
.arc-card .ac-fx li:last-child { border-bottom: 0; }
.arc-card .ac-found { display: flex; flex-wrap: wrap; gap: .4em 1em; margin: 0 0 .4em; padding: 0; list-style: none; }
.arc-card .ac-found li { display: inline-flex; align-items: center; gap: .5em; font-size: 1.05em; }
.arc-card .ac-found img {
  width: 1.5em; height: 1.5em; padding: .22em; border-radius: 50%; background: var(--ink); object-fit: contain;
}

/* tier switcher (interactive widget only) */
.arc-card .ac-tiers { display: flex; gap: .3em; margin: 0 0 .7em; }
.arc-card .ac-tiers button {
  min-width: 2.4em; height: 1.8em; padding: 0 .5em; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .9em/1 var(--f-ui); letter-spacing: .04em; color: var(--ink); background: var(--paper-2);
}
.arc-card .ac-tiers button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.arc-card .ac-tiers button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* footer band: stack | weight | value */
.arc-card .ac-foot { display: flex; background: var(--paper-2); }
.arc-card .ac-foot div {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em .4em; font: 600 1.1em/1 var(--f-ui); font-variant-numeric: tabular-nums;
}
.arc-card .ac-foot div + div { border-left: 2px solid var(--paper); }
.arc-card .ac-foot svg { width: 1.15em; height: 1.15em; flex: none; }

.arc-card .ac-note { margin: .2em 0 0; font-size: .8em; color: var(--muted); }

/* stash / container tile (game inventory square): navy with a rarity swoosh bottom-left, rarity border,
   footer strip with the type glyph and xN or the weapon tier. Text and glyph scale with the tile (cqw). */
.arc-tile {
  position: relative; box-sizing: border-box;
  width: var(--tile, 8em); height: var(--tile, 8em);
  container-type: inline-size;
  font: 400 16px/1 var(--f-ui);
  border-radius: 7.5%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rc) 72%, transparent);
  /* background: darkest in the top-right corner, lighter and tinted with the rarity colour towards the bottom-left
     (circular, centred on the top-right corner); the tint grows with rarity (--tint) */
  background: radial-gradient(circle farthest-corner at 100% 0, #070a18 0%, #0b1020 35%,
    color-mix(in srgb, var(--rc) calc(var(--tint) * 100%), #10162a) 100%);
  --tint: .10;
  /* swoosh (measured on 4K inventory captures, build p4843): the rarity colour fills the bottom-left corner of the
     area above the footer, cut by a navy circle that touches the left edge and the footer's top edge. The circle
     radius grows with rarity (--sw, fraction of the tile); --ft = footer top. Requirement-list icons have no footer
     and a ~1.18x larger circle (.bare / no .at-foot). */
  --sw: .30; --ft: .76; --swk: 1;
}
.arc-tile[data-rarity="uncommon"] { --sw: .385; --tint: .16; }
.arc-tile[data-rarity="rare"] { --sw: .485; --tint: .22; }
.arc-tile[data-rarity="epic"] { --sw: .58; --tint: .32; }
.arc-tile[data-rarity="legendary"] { --sw: .68; --tint: .6; }
.arc-tile::before {
  content: ""; position: absolute; left: 0; pointer-events: none;
  top: calc((var(--ft) - var(--sw) * var(--swk)) * 100%);
  width: calc(var(--sw) * var(--swk) * 100%); height: calc(var(--sw) * var(--swk) * 100%);
  background: radial-gradient(circle at 100% 0, transparent 70.5%, var(--rc) 70.9%);
}
.arc-tile.bare, .arc-tile:not(:has(.at-foot)) { --ft: 1; --swk: 1.18; border-radius: 10%; }
/* amplified (quality 6, e.g. Amplification Modules), measured on an in-game capture: no swoosh; a vertical gradient
   (#1a1018 top -> #5c3524 at the footer line) under four flat orange bands that fade out upwards (about 13 / 35 / 60 /
   100% opacity, 1% gaps), the last one ending on the footer top; opaque dark footer; orange border */
.arc-tile[data-rarity="amplified"] {
  border-color: color-mix(in srgb, var(--r-amplified) 85%, transparent);
  background:
    linear-gradient(to bottom, transparent 0 calc(var(--ft) * 100% - 29%),
      rgb(232 134 41 / .13) calc(var(--ft) * 100% - 29%) calc(var(--ft) * 100% - 22%), transparent 0 calc(var(--ft) * 100% - 20.8%),
      rgb(232 134 41 / .35) 0 calc(var(--ft) * 100% - 14.5%), transparent 0 calc(var(--ft) * 100% - 13.4%),
      rgb(232 134 41 / .6) 0 calc(var(--ft) * 100% - 7%), transparent 0 calc(var(--ft) * 100% - 5.9%),
      #e88629 0 calc(var(--ft) * 100%), transparent 0),
    linear-gradient(to bottom, #1a1018 0%, #50302a calc(var(--ft) * 60%), #5c3524 calc(var(--ft) * 100%), #090c19 0);
}
.arc-tile[data-rarity="amplified"]::before { display: none; }
.arc-tile[data-rarity="amplified"] .at-foot { background: #090c19; }
/* equipped weapon slot (loadout EQUIPMENT, ArcItemCard.slot), measured on a 4K loadout capture (607 x 398 slot) and the
   Frozen Trail loadout with two amplified guns: the same tile stretched to ~1.53:1. Footer 17.7% of the height; the
   swoosh circle is ~0.63x the square tile's, in tile heights (legendary .42h, uncommon .24h); ~20px corners. The
   amplified bands are % of the height already, so they carry over with the footer line. The weapon is the horizontal
   "big" render (barrel left), ~2/3 of the width, centred above the footer. */
.arc-tile.slot {
  width: var(--slot, 18em); height: auto; aspect-ratio: 1.53;
  border-radius: 3.3% / 5%;
  --ft: .823; --swk: .63;
}
.arc-tile.slot::before { width: auto; aspect-ratio: 1; }
.arc-tile.slot .at-icon { left: 17%; width: 66%; top: 4%; height: 66%; }
.arc-tile.slot .at-foot { height: 17.7%; padding: 0 3.5% 0 3%; font-size: 6.2cqw; }
.arc-tile.slot .at-glyph { width: 8.5cqw; height: 8.5cqw; }
.arc-tile.slot .at-left, .arc-tile.slot .at-right { display: flex; align-items: center; gap: 3cqw; min-width: 0; }
/* amplified: the row of square buttons above the footer (game: mod slots + amplification chip; here the chip + the
   build's perks), measured on a Frozen Trail loadout: ~18% of the slot height, 2.4% gaps, bottom ~3.5% above the
   footer. The weapon moves up to make room, as in the game. Footer: the chip glyph after the right-hand value. */
.arc-tile.slot.has-amp .at-icon { top: -3%; }
.arc-tile.slot .at-amp {
  position: absolute; left: 0; right: 0; bottom: calc((1 - var(--ft)) * 100% + 3.5%);
  display: flex; justify-content: center; gap: 2.4cqw; pointer-events: none;
}
.arc-tile.slot .at-ampi {
  width: 11.6cqw; height: 11.6cqw; display: grid; place-items: center; box-sizing: border-box;
  border-radius: 1.8cqw; background: rgba(9, 12, 25, .9); border: 1px solid rgba(205, 218, 255, .3);
}
.arc-tile.slot .at-ampi img { width: 64%; height: 64%; object-fit: contain; }
.arc-tile.slot .at-right .at-glyph { opacity: .55; }
.arc-tile.empty { border-color: rgba(205,218,255,.17); background: rgba(14,19,33,.55); }
.arc-tile.empty::before { display: none; }
.arc-tile .at-icon {
  position: absolute; left: 8%; top: 4%; width: 84%; height: 74%; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.arc-tile .at-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24%; padding: 0 7% 0 6%;
  display: flex; align-items: center; justify-content: space-between; gap: 4%;
  background: rgba(6,9,16,.62); color: #eef0f5;
  font: 600 14.5cqw/1 var(--f-ui); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.arc-tile .at-glyph { width: 14cqw; height: 14cqw; object-fit: contain; flex: none; }
.arc-tile.on {
  border: 2px solid #f3ead9;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 16px rgba(248,237,225,.22);
}
.arc-tile .ag-cursor {
  position: absolute; left: 47%; top: 46%; width: 24%; height: auto; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* container panel: [[grid:...]] / ArcItemCard.grid(). --tile, --gap, --cfs (card font size) are tunable. */
.arc-grid {
  --tile: 88px; --gap: 8px; --cfs: 15px;
  position: relative; display: inline-block; box-sizing: border-box; width: max-content; flex: none;
  font: 400 16px/1.3 var(--f-ui); color: #eef0f5; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.arc-grid *, .arc-grid *::before, .arc-grid *::after { box-sizing: border-box; }
.arc-grid[data-bg="panel"], .arc-grid[data-bg="image"] {
  padding: 18px; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 100% at 30% 0%, #1a2238 0%, #0b1020 55%, #070a12 100%);
}
.arc-grid[data-bg="image"]::before {
  content: ""; position: absolute; inset: -24px; z-index: -1;
  background: var(--bgimg) center / cover no-repeat;
  filter: blur(14px) brightness(.5) saturate(.9);
}
.arc-grid .ag-panel { position: relative; }
.arc-grid[data-bg="panel"] .ag-panel, .arc-grid[data-bg="image"] .ag-panel {
  padding: 22px 26px 26px; border-radius: 10px;
  background: rgba(20,26,44,.78); border: 1px solid rgba(205,218,255,.08);
}
.arc-grid .ag-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; white-space: nowrap; }
.arc-grid .ag-head h4 { margin: 0; font: 700 22px/1 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; color: #eef0f5; }
.arc-grid .ag-head i { flex: none; width: 28px; height: 1px; background: rgba(238,240,245,.5); }
.arc-grid .ag-head span { font: 600 16px/1 var(--f-ui); color: #d9dce4; font-variant-numeric: tabular-nums; }
.arc-grid .ag-row { display: flex; align-items: flex-start; }
.arc-grid .ag-tiles { flex: none; display: grid; grid-template-columns: repeat(var(--cols), var(--tile)); gap: var(--gap); }
.arc-grid .arc-tile[tabindex] { cursor: pointer; outline: none; }
.arc-grid .arc-tile[tabindex]:hover:not(.on), .arc-grid .arc-tile[tabindex]:focus-visible:not(.on) { border-color: rgba(243,234,217,.85); }

/* scene: card laid out right of the hovered tile (col --hc, row --hr), tab on top, like the game screen.
   Once interactive (.live, set by item-tooltip.js) the row reserves room for the card next to the last column,
   so moving the hover never reflows the page; static HTML and PNG shots stay cropped to the composition. */
.arc-grid.scene.live .ag-row { min-width: calc(var(--cols) * (var(--tile) + var(--gap)) - var(--gap) + 14px + 23.75 * var(--cfs)); }
.arc-grid .ag-tip {
  flex: none; position: relative; z-index: 3;
  margin-left: calc((var(--hc) + 1 - var(--cols)) * (var(--tile) + var(--gap)) + 14px);
  margin-top: max(-20px, calc(var(--hr) * (var(--tile) + var(--gap)) - .78 * var(--tile) - 46px));
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.5));
}
.arc-grid .ag-tip .arc-card { font-size: var(--cfs); }
.arc-grid .ag-tab {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px 0 16px;
  border-radius: 8px 8px 0 0; background: #d7c8b2; color: #12151d;
  font: 700 17px/1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.arc-grid .ag-tab svg { width: 13px; height: 20px; opacity: .8; }
.arc-grid .ag-tab + .arc-card { border-top-left-radius: 0; }
/* narrow columns (item-tooltip.js adds .stack): card under the grid, readable instead of shrunk */
.arc-grid.scene.stack .ag-row { flex-direction: column; min-width: 0; }
.arc-grid.scene.stack .ag-tip { margin: 16px 0 0; }

/* plain grids in articles scroll sideways instead of breaking the column; scenes are zoomed to fit by JS */
.arc-grid-wrap { max-width: 100%; overflow-x: auto; margin: 1.2em 0; }

/* hover tooltip host */
.arc-tip {
  position: fixed; z-index: 10000; pointer-events: none; top: 0; left: 0;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  opacity: 0; transition: opacity .12s ease;
}
.arc-tip.on { opacity: 1; }
.arc-tip .arc-card { font-size: 14px; }
.arc-ref {
  color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .18em;
  cursor: help;
}
a.arc-ref { cursor: pointer; }
.arc-ref img.arc-ref-icon { width: 1.2em; height: 1.2em; vertical-align: -.25em; margin-right: .2em; object-fit: contain; }
@media (max-width: 480px) { .arc-tip .arc-card { font-size: 12.5px; } }