/*
 * Item pictures (art/README.md): the classes their shapes use, the colours behind them, and the tiles they sit on.
 * The pictures are <symbol>s in art/items.svg, put in the page once; an item shows one with
 * <span class="art-tile rar-… glow-…"><svg viewBox="0 0 64 64"><use href="#i-…"/></svg></span> (app/art.js).
 * Their colours are CSS variables, so a theme, a rarity or an item can change them.
 */
:root {
  --ab: #c4cbd6;   /* body */
  --am: #7e8797;   /* metal */
  --ad: #262b35;   /* dark */
  --ac: #7b5a3b;   /* soft goods */
  --ax: #d9a33c;   /* the item's own colour */
  --as: #0f1d29;   /* glass */
  --ag: #5cc8ff;   /* energy */
  --aw: #ffffff;   /* energy core */
  --ai: #07090d;   /* outline */
  --ah: rgba(255, 255, 255, .9); /* highlight */
  --rar: #8d96a6;  /* the tile's edge: the rarity */
}
.a-b { fill: var(--ab); }
.a-m { fill: var(--am); }
.a-d { fill: var(--ad); }
.a-c { fill: var(--ac); }
.a-x { fill: var(--ax); }
.a-s { fill: var(--as); }
.a-g { fill: var(--ag); }
.a-w { fill: var(--aw); }
.a-o { stroke: var(--ai); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.a-oo { stroke: var(--ai); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.a-l { fill: none; stroke: var(--ah); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.a-p { fill: none; stroke: var(--ai); stroke-width: .8; stroke-opacity: .55; stroke-linecap: round; }
.a-gl { fill: none; stroke: var(--ag); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* The tile: a slot in the theme's colours, its edge and glow the item's rarity. */
.art-tile {
  --t: 40px;
  position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
  width: var(--t); height: var(--t); border-radius: calc(var(--t) * .22);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rar) 22%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--panel-2) 85%, #fff 6%), color-mix(in srgb, var(--bg) 80%, #000 12%));
  border: 1px solid color-mix(in srgb, var(--rar) 60%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -6px 12px rgba(0, 0, 0, .18), 0 0 calc(var(--t) * .22) -6px var(--rar);
}
:root[data-theme="light"] .art-tile {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rar) 22%, transparent), transparent 62%),
    linear-gradient(160deg, #3a4150, #1c2029);
}
.art-tile > svg { width: 88%; height: 88%; overflow: visible; }
.art-tile > .art-badge { position: absolute; right: -10%; bottom: -10%; width: 46%; height: 46%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.art-tile.sm { --t: 28px; }
.art-tile.lg { --t: 64px; }
.art-tile.xl { --t: 96px; }

/* Rarity (SW5E's): the tile's edge and glow. */
.rar-standard { --rar: #8d96a6; }
.rar-premium { --rar: #4cc76c; }
.rar-prototype { --rar: #3f8cff; }
.rar-advanced { --rar: #a65cff; }
.rar-legendary { --rar: #ff9d2e; }
.rar-artifact { --rar: #ff4f5e; }
.rar-legendary, .rar-artifact { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -6px 12px rgba(0, 0, 0, .18), 0 0 calc(var(--t) * .35) -4px var(--rar); }

/* Energy colours: blades, bolts, cells. */
.glow-red { --ag: #ff3b30; }
.glow-blue { --ag: #2f8dff; }
.glow-green { --ag: #36e05a; }
.glow-violet { --ag: #b45cff; }
.glow-yellow { --ag: #ffd23a; }
.glow-orange { --ag: #ff8a1f; }
.glow-cyan { --ag: #45e3ff; }
.glow-white { --ag: #dfeeff; }
.glow-pale { --ag: #a9f3ff; }
.glow-accent { --ag: var(--accent); }
/* The item's own colour: paint and bands. */
.ax-hazard { --ax: #e6b422; }
.ax-med { --ax: #2fbf9b; }
.ax-red { --ax: #c8463b; }
.ax-blue { --ax: #3f74c9; }
.ax-green { --ax: #4f9a4a; }
.ax-purple { --ax: #8a55c9; }
.ax-gold { --ax: #c9a43c; }
.ax-white { --ax: #e9edf2; }
.ax-black { --ax: #2a2e36; }
.ax-accent { --ax: var(--accent); }

/* Where the tiles sit in the sheet. */
.inv-item { display: flex; gap: 10px; align-items: flex-start; }
.inv-item > .art-tile { margin-top: 1px; }
.inv-what { min-width: 0; flex: 1; }
tr.is-equipped .inv-item > .art-tile { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; }
.loadout { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; text-decoration: none; width: fit-content; }
.loadout .art-tile { --t: 38px; transition: transform .15s ease, filter .15s ease; }
.loadout:hover .art-tile { transform: translateY(-1px); filter: brightness(1.12); }
.sugg-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.add-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.eff-head > .art-tile { margin-right: 2px; }
@media (max-width: 560px) { .inv-item { gap: 8px; } .inv-item > .art-tile { --t: 34px; } }
.stat { position: relative; }
/* The armor and shield worn, beside the Armor Class number (not over the label, however many there are). */
.stat-art { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; flex-wrap: wrap; }

/* Each damage badge keeps its own colour, whatever the item's energy colour is. */
.b-fire { --ag: #ff6a1a; }
.b-cryo { --ag: #9fe8ff; }
.b-ion { --ag: #3d8bff; }
.b-lightning { --ag: #ffe23d; }
.b-acid { --ag: #b6e82a; }
.b-poison { --ag: #3fd45a; }
.b-sonic { --ag: #2fe0c8; }
.b-plasma { --ag: #ff4fd2; }
.b-stun { --ag: #ffb22e; }
.b-frag { --ag: #ff3b30; }
.b-flash { --ag: #fff3c4; }
.b-panic { --ag: #b25cff; }

/* An enhanced item's tier (Fine … Exceptional, Mk I … VI, Novice … Ancient): pips along the tile's top edge. */
.art-tile > .art-tier {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%); height: 4px;
  width: calc(var(--n) * 6px - 2px); max-width: 86%;
  background: radial-gradient(circle, var(--rar, #ffd23a) 1.6px, transparent 2px) 0 50% / 6px 4px repeat-x;
  filter: drop-shadow(0 0 2px var(--rar, #ffd23a));
}
.art-tile.sm > .art-tier { top: 1px; transform: translateX(-50%) scale(.75); }
.ax-copper { --ax: #c0753a; }