/* The Activity's UI kit: Diablo / Path of Exile conventions, built from the user's own UI-GUI pack
   (web/activity/assets/kit, made by tools/activity/prep_ui_kit.py; "d/" = the plum darkened to iron).
   Pixel art is drawn at whole multiples (--px) and never smoothed. */

@font-face { font-family: 'FantasyPixel'; src: url('/activity/assets/kit/fantasy-pixel.ttf') format('truetype'); font-display: swap; }

:root {
  --px: 2;                                   /* art scale: one pack pixel = 2 screen pixels */
  --kit: '/activity/assets/kit';
  --ink: #0b0908;
  --iron-0: #0f0d0b;
  --iron-1: #15120f;
  --iron-2: #1d1914;
  --iron-3: #2a241c;
  --gold: #d2a95d;
  --gold-hi: #f4dc9a;
  --gold-lo: #8a6838;
  --parch: #e6dac0;
  --parch-dim: #a69b83;
  --parch-faint: #6f675a;
  --blood: #b8352e;
  --mana: #3a64c8;
  --good: #7fbf6f;
  --bad: #d65a4a;
  --magic: #8ea9ff;
  /* Brawl's rarities (the run's colours). */
  --r-basic: #8d8478; --r-common: #cfc4ae; --r-uncommon: #7fbf6f; --r-rare: #d9b64a; --r-epic: #a76fd8;
  --r-legendary: #cf6b2e; --r-set: #58c4d8; --r-unique: #d98d3c; --r-primal: #e05252; --r-mythic: #d84a6f;
  --f-title: 'FantasyPixel', Georgia, serif;
  --f-ui: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  color-scheme: dark;
}

.kit, .kit * { box-sizing: border-box; }
.kit { font: 15px/1.4 var(--f-ui); color: var(--parch); -webkit-font-smoothing: antialiased; }
.kit img, .pix { image-rendering: pixelated; }
.kit button { font: inherit; color: inherit; cursor: pointer; }

/* ---- windows ------------------------------------------------------------------------------------------- */
/* A window: the pack's studded gold frame, iron-black inside, a faint warm light from the top. */
.wnd {
  position: relative;
  border: calc(20px * var(--px)) solid transparent;
  border-image: url('/activity/assets/kit/d/panels/panel-h.png') 20 / calc(20px * var(--px)) stretch;
  padding: 18px 20px 20px;
  margin: calc(-14px * var(--px));
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(150, 110, 60, 0.10), transparent 60%),
    radial-gradient(ellipse 90% 90% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 70%),
    linear-gradient(180deg, #14110e, #0e0c0a);
  background-clip: padding-box;
  image-rendering: pixelated;
}
.wnd > * { image-rendering: auto; }
/* The ornate variant (filigree all round) for the large screens. */
.wnd.ornate { border-image-source: url('/activity/assets/kit/d/panels/panel-q-1.png'); }

/* The title plaque riding the top edge, a rosette at each end. */
.plaque {
  position: absolute; left: 50%; top: calc(-20px * var(--px) - 6px); transform: translateX(-50%);
  min-width: 220px; height: calc(18px * var(--px));
  display: flex; align-items: center; justify-content: center; padding: 0 calc(12px * var(--px));
  border: calc(6px * var(--px)) solid transparent; border-top-width: 0; border-bottom-width: 0;
  border-image: url('/activity/assets/kit/d/titles/title-b.png') 0 6 fill / 0 calc(6px * var(--px)) stretch;
  font: 400 calc(9px * var(--px))/1 var(--f-title); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi);
  text-shadow: 0 2px 0 #000; white-space: nowrap; z-index: 2;
}
.plaque::before, .plaque::after { content: ''; position: absolute; top: 50%; width: calc(19px * var(--px)); height: calc(19px * var(--px)); transform: translateY(-50%);
  background: url('/activity/assets/kit/frames/detail2.png') center / contain no-repeat; image-rendering: pixelated; }
.plaque::before { left: calc(-16px * var(--px)); }
.plaque::after { right: calc(-16px * var(--px)); }

.wnd-close {
  position: absolute; top: -6px; right: -6px; width: calc(16px * var(--px)); height: calc(16px * var(--px)); padding: 0; border: 0;
  background: url('/activity/assets/kit/d/menuicons/menuicons-a3.png') center / 100% 100% no-repeat; image-rendering: pixelated; z-index: 3;
}
.wnd-close:hover { background-image: url('/activity/assets/kit/d/menuicons/menuicons-b3.png'); }

/* A recessed inner field (a stat block, a list, a grid's bed). */
.inset {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
  box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(210, 169, 93, 0.12);
  border: 1px solid #3a2f22;
}

/* Section header: small caps in gold between two flourished rules. */
.rule {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 8px;
  font: 400 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.12em; color: var(--gold);
}
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-lo) 30%, var(--gold-lo) 70%, transparent); }

/* ---- tabs --------------------------------------------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; justify-content: center; }
.tab {
  height: calc(18px * var(--px)); padding: 0 16px; border: calc(6px * var(--px)) solid transparent; border-top-width: 0; border-bottom-width: 0;
  border-image: url('/activity/assets/kit/d/titles/title-b.png') 0 6 fill / 0 calc(6px * var(--px)) stretch;
  background: none; font: 400 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; color: var(--parch-dim);
  filter: brightness(0.75) saturate(0.6); image-rendering: pixelated;
}
.tab:hover { filter: none; color: var(--parch); }
.tab[aria-selected="true"], .tab.on { filter: none; color: var(--gold-hi); border-image-source: url('/activity/assets/kit/d/titles/title-c.png'); }

/* ---- buttons -------------------------------------------------------------------------------------------------- */
/* The pack's iron capsule (trimmed), drawn 1:1 at the art scale; primaries carry gem caps (red, gold, green). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: calc(24px * var(--px)); min-width: calc(60px * var(--px)); padding: 0 calc(4px * var(--px));
  border: 0 solid transparent; border-width: 0 calc(8px * var(--px));
  border-image: url('/activity/assets/kit/d/ui/btn.png') 0 8 fill / 0 calc(8px * var(--px)) stretch;
  background: none; color: var(--parch); font: 400 15px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.08em; text-shadow: 0 1px 0 #000, 0 0 6px #000;
  image-rendering: pixelated; white-space: nowrap;
}
.btn:hover:not(:disabled) { color: var(--gold-hi); filter: brightness(1.2); }
.btn:active:not(:disabled) { border-image-source: url('/activity/assets/kit/d/ui/btn-press.png'); color: #2a1a08; text-shadow: 0 1px 0 rgba(255, 236, 190, 0.5); }
.btn:disabled { opacity: 0.45; cursor: default; filter: saturate(0.4); }
.btn.red, .btn.gold, .btn.green { border-width: 0 calc(30px * var(--px)); border-image-slice: 0 30 fill; border-image-width: 0 calc(30px * var(--px)); padding: 0 calc(2px * var(--px)); }
.btn.red { border-image-source: url('/activity/assets/kit/d/ui/btn-red.png'); }
.btn.gold { border-image-source: url('/activity/assets/kit/d/ui/btn-gold.png'); }
.btn.green { border-image-source: url('/activity/assets/kit/d/ui/btn-green.png'); }
.btn .cost { font: 400 13px/1 var(--f-ui); color: var(--gold-hi); }

/* Square icon button (the HUD's menu buttons): a gold-bracketed slot with a glyph. */
.ibtn {
  position: relative; width: calc(22px * var(--px)); height: calc(22px * var(--px)); padding: 0; border: 0; background: none;
}
.ibtn::before { content: ''; position: absolute; inset: 0; background: url('/activity/assets/kit/d/slots/slotc2.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
.ibtn > .glyph { position: absolute; inset: calc(3px * var(--px)); }
.ibtn:hover { filter: brightness(1.25); }
.ibtn.on::after { content: ''; position: absolute; inset: -3px; border: 1px solid rgba(244, 220, 154, 0.8); box-shadow: 0 0 10px rgba(244, 200, 120, 0.4); }
.ibtn kbd { position: absolute; right: 2px; bottom: 0; font: 400 10px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 3px #000; }

/* A glyph from the pack's mechanic icon map (22px cells; three colourways: red, gold, silver). */
.glyph { display: block; background-image: url('/activity/assets/kit/glyphs/skillstilemap-22x22.png'); background-repeat: no-repeat; image-rendering: pixelated; }

/* ---- item slots ---------------------------------------------------------------------------------------------- */
/* An inventory cell: the iron slot with gold corner brackets; an item's rarity glows faintly in its bed. */
.slot {
  --rc: transparent;
  position: relative; width: calc(24px * var(--px)); height: calc(24px * var(--px));
  border: calc(6px * var(--px)) solid transparent;
  border-image: url('/activity/assets/kit/d/slots/slotd2.png') 6 fill / calc(6px * var(--px)) stretch;
  background: none; padding: 0; image-rendering: pixelated;
}
.slot::before { content: ''; position: absolute; inset: calc(-2px * var(--px)); background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 72%); pointer-events: none; }
.slot > .icon { position: absolute; inset: calc(-4px * var(--px)); }
.slot:hover { filter: brightness(1.3); }
.slot.sel::after { content: ''; position: absolute; inset: calc(-6px * var(--px)); border: 2px solid var(--gold-hi); box-shadow: 0 0 12px rgba(244, 210, 140, 0.5); }
.slot .qty { position: absolute; left: -6px; top: -8px; font: 400 11px/1 var(--f-title); color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
/* Paper-doll slots are larger and take the item's shape. */
.slot.doll { width: auto; height: auto; }

/* An item icon: the pack's 22px object icons (frame stripped), at whole multiples. */
.icon { display: block; background-image: url('/iso/assets/loot/icons.png'); background-repeat: no-repeat; image-rendering: pixelated; }

/* ---- bars ------------------------------------------------------------------------------------------------------ */
/* The pack's ornate bar: a curled left cap and gold collar (46 px), the trough (stretched), a right cap (16 px);
   its fill is the pack's 80x4 strip laid in the trough (art rows 9-16). */
.bar {
  position: relative; height: calc(26px * var(--px)); min-width: calc(90px * var(--px));
  border: 0 solid transparent; border-width: 0 calc(16px * var(--px)) 0 calc(46px * var(--px));
  border-image: url('/activity/assets/kit/d/bars/dynamicbar-a1.png') 0 16 0 46 fill / 0 calc(16px * var(--px)) 0 calc(46px * var(--px)) stretch;
  image-rendering: pixelated;
}
.bar > .track { position: absolute; left: calc(-2px * var(--px)); right: calc(-1px * var(--px)); top: calc(10px * var(--px)); height: calc(6px * var(--px)); overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: url('/activity/assets/kit/d/bars/redbar.png') 0 0 / 100% 100%; image-rendering: pixelated; transition: width 0.4s ease; }
.bar.xp .fill { background-image: url('/activity/assets/kit/d/bars/goldbar.png'); }
.bar.mana .fill { background-image: url('/activity/assets/kit/d/bars/bluebar.png'); }
.bar.green .fill { background-image: url('/activity/assets/kit/d/bars/greenbar.png'); }
.bar > .val { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 400 12px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; }

/* ---- tooltips (Path of Exile's) -------------------------------------------------------------------------------- */
.tip {
  --rc: var(--r-common);
  position: fixed; z-index: 1000; min-width: 260px; max-width: 380px; max-height: calc(100vh - 16px); overflow-y: auto; pointer-events: auto;
  background: rgba(4, 3, 2, 0.94); border: 1px solid color-mix(in srgb, var(--rc) 55%, #000);
  box-shadow: 0 0 0 1px #000, 0 10px 40px rgba(0, 0, 0, 0.8);
  text-align: center; font: 14px/1.35 var(--f-ui);
}
.tip-head {
  position: relative; padding: 7px 26px 6px; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 34%, #000), color-mix(in srgb, var(--rc) 14%, #000));
  border-bottom: 1px solid color-mix(in srgb, var(--rc) 60%, #000);
}
.tip-head::before, .tip-head::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: url('/activity/assets/kit/frames/detail1.png') center / contain no-repeat; image-rendering: pixelated; opacity: 0.85; }
.tip-head::before { left: 4px; } .tip-head::after { right: 4px; }
.tip-name { display: block; font: 400 16px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: 0.03em; color: var(--rc); }
.tip-base { display: block; font: 400 14px/1.2 var(--f-ui); font-variant: small-caps; color: color-mix(in srgb, var(--rc) 70%, #fff); }
.tip-body { padding: 8px 14px 10px; }
.tip-line { color: #8f8a7e; }
.tip-line b { color: #fff; font-weight: 400; }
.tip-sep { height: 1px; margin: 7px 18px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 60%, #000), transparent); }
.tip-mod { color: var(--magic); }
.tip-mod.greater { color: #c7b6ff; }
.tip-mod.mw { color: #ffcf6b; }
.tip-req { color: #8f8a7e; font-size: 13px; }
.tip-req b { color: #fff; font-weight: 400; }
.tip-flavour { color: #a8763a; font-style: italic; }
.tip-cost { color: var(--gold-hi); }
.tip-set-name { margin: 2px 0 5px; color: var(--r-set); font: 400 14px/1.2 var(--f-ui); font-variant: small-caps; letter-spacing: 0.05em; }
.tip-set-pieces { margin: 0 8px 7px; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--r-set) 22%, #000); border-bottom: 1px solid color-mix(in srgb, var(--r-set) 22%, #000); text-align: left; }
.tip-set-piece { display: flex; justify-content: space-between; gap: 10px; color: var(--r-set); font-size: 12px; line-height: 1.3; }
.tip-set-piece.current { color: color-mix(in srgb, var(--r-set) 35%, #fff); }
.tip-set-piece span { flex: none; color: color-mix(in srgb, var(--r-set) 35%, #777); font-size: 11px; }
.tip-set-bonus { margin: 5px 0 7px; text-align: left; color: var(--r-set); font-size: 12px; line-height: 1.3; }
.tip-set-bonus b { display: block; margin-bottom: 2px; color: color-mix(in srgb, var(--r-set) 35%, #fff); font-weight: 600; }

/* ---- stat rows (D2's character sheet) ------------------------------------------------------------------------- */
.stat {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)); border: 1px solid #2c241a; box-shadow: inset 0 0 0 1px #000;
}
.stat + .stat { margin-top: 3px; }
.stat > span { font: 400 14px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.05em; color: var(--parch-dim); }
.stat > b { font: 400 15px/1 var(--f-ui); color: #fff; }
.stat > b.up { color: var(--magic); }
.stat > b.fire { color: #ff7a52; } .stat > b.cold { color: #6fb6ff; } .stat > b.light { color: #ffe06b; } .stat > b.entropy { color: #b57bff; }

/* ---- the cursor ------------------------------------------------------------------------------------------------ */
.kit-cursor { cursor: url('/activity/assets/kit/cursors/cursor1.png') 1 1, auto; }