/* ==========================================================================
   Item tracker stylesheet  (served as /static/items.css)

   "Reliquary": the app's Ink & Triforce language (graphite + one gold accent)
   applied to the item pane. Every item rests in a shallow socket; an item in
   hand warms its socket and gets a short gold sill under it, so "owned" reads
   from the cell as well as from the sprite. Dungeons are graphite plates: a
   boss portrait (a rounded tile whose rim says whether you can kill it), the
   name and prize along the top, the dungeon's own map / compass / big key,
   and the key and item counts. Green and red stay strictly semantic (boss
   down / killable, missing requirement); gold means identity, focus and
   "you are here".

   Used by items-full.html (the in-app column, which lays the plates out as
   cards on top of this) and broadcast.html (the OBS overlay). The class names
   are the DOM contract tracker-full.js builds; this file only decides how
   they look. Declarations are grouped per line by concern: placement / box /
   type / paint. Chromium 83 (the app's QtWebEngine): no flex `gap`, no
   `inset`, no :is().
   ========================================================================== */

:root {
  --ir-ink-0: #0E0E10;   --ir-ink-1: #17171B;   --ir-ink-2: #1F1F24;   --ir-ink-3: #2A2A31;
  --ir-paper: #F3F1EA;   --ir-paper-2: #A9A8A1; --ir-paper-3: #7B7A73; --ir-paper-4: #545350;
  --ir-gold: #E6B143;    --ir-gold-hi: #F1C158; --ir-gold-rgb: 230, 177, 67;
  --ir-ok: #58B27C;      --ir-ok-rgb: 88, 178, 124;
  --ir-bad: #D65F58;
  --ir-hair: rgba(255, 255, 255, 0.06);  --ir-hair-2: rgba(255, 255, 255, 0.12);
  --ir-face: 'Segoe UI', Tahoma, Helvetica, sans-serif;
}

html, body { margin: 0; padding: 0; overflow-x: hidden; }
/* align-items: a host page that makes body a flex column (the broadcast
   overlay) gets its blocks at their own width, so its columns wrap the way
   OBS layouts were set up around. */
body { align-items: flex-start; background: var(--ir-ink-0); color: var(--ir-paper); font-family: var(--ir-face); }

/* Pixel art stays pixel art at every scale. */
.item-slot img, .bottle-cell img, .prize-img, .boss-img, .boss-popup-item img,
.bigkey-img, .compass-img, .map-img, .count-icon, .stat-icon { image-rendering: pixelated; }

/* --------------------------------------------------------------------------
   Item rows
   -------------------------------------------------------------------------- */
.tracker-container { margin: 0 auto; }
.tracker-row { display: flex; align-items: center; line-height: 0; }
/* Item rows share one pitch: a 48px cell plus an 8px lane. The Link pane
   (items-full.html) is sized from it, 56 + 48 = 104px. */
.tracker-row.item-row { height: 56px; align-items: flex-start; }

.item-slot {
  position: relative; flex: 0 0 48px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* The socket. */
.item-slot::before {
  content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px;
  border-radius: 10px; pointer-events: none;
  background: rgba(255, 255, 255, 0.022); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  transition: background-color 0.18s, box-shadow 0.18s;
}
.item-slot.filled::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 30%, rgba(var(--ir-gold-rgb), 0.10));
  box-shadow: inset 0 0 0 1px rgba(var(--ir-gold-rgb), 0.17);
}
/* The sill: a short gold bar under an item you hold. */
.item-slot.filled::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px;
  border-radius: 1px; pointer-events: none; background: var(--ir-gold); opacity: 0.7;
}
.item-slot:hover::before { box-shadow: inset 0 0 0 1px rgba(var(--ir-gold-rgb), 0.55); }
.item-slot img { position: relative; z-index: 1; max-width: 48px; max-height: 48px; transition: filter 0.12s; }
.item-slot:hover img { filter: brightness(1.25); }

/* MM / TR badge on the three medallions: a gold-rimmed tab in the corner,
   a control of its own (left / right step the label). */
.medallion-label {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  min-width: 13px; padding: 2px 3px; border-radius: 4px;
  font: 800 8px/1 var(--ir-face); letter-spacing: 0.05em; text-align: center; color: var(--ir-gold);
  background: rgba(14, 14, 16, 0.9); box-shadow: inset 0 0 0 1px rgba(var(--ir-gold-rgb), 0.6); cursor: pointer;
}
.medallion-label:hover { color: var(--ir-gold-hi); box-shadow: inset 0 0 0 1px var(--ir-gold-hi); }
.medallion-label:empty { display: none; }
.medallion-label.empty { color: var(--ir-paper-4); box-shadow: inset 0 0 0 1px var(--ir-hair-2); }

/* Bottles: four small sockets inside one cell. */
.bottle-grid {
  position: relative; flex: 0 0 48px; width: 48px; height: 48px;
  box-sizing: border-box; padding: 3px; cursor: pointer;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 1px;
}
.bottle-cell {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 6px; background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.bottle-cell.filled { background: rgba(var(--ir-gold-rgb), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--ir-gold-rgb), 0.18); }
.bottle-cell:hover { box-shadow: inset 0 0 0 1px rgba(var(--ir-gold-rgb), 0.55); }
.bottle-cell img { position: relative; z-index: 1; width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Go mode: a drawn Triforce. Unlit = graphite outline; GO = solid gold that
   breathes and turns over now and then; "possibly GO" = a gold outline.
   -------------------------------------------------------------------------- */
.item-slot.go-mode svg { position: relative; z-index: 1; display: block; width: 38px; height: 33px; overflow: visible; }
.item-slot.go-mode .tri {
  fill: #232328; stroke: #5E5E66; stroke-width: 2.5; stroke-linejoin: round;
  transition: fill 0.3s, stroke 0.3s;
}
.item-slot.go-feel .tri { fill: rgba(var(--ir-gold-rgb), 0.12); stroke: var(--ir-gold); }
.item-slot.go-on .tri   { fill: var(--ir-gold); stroke: var(--ir-gold-hi); }
.item-slot.go-feel svg  { animation: ir-tri-breathe 3.2s ease-in-out infinite; }
.item-slot.go-on svg    { animation: ir-tri-breathe 1.6s ease-in-out infinite, ir-tri-turn 4.8s ease-in-out infinite; }
.item-slot.go-on::before {
  background: radial-gradient(circle at 50% 60%, rgba(var(--ir-gold-rgb), 0.22), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--ir-gold-rgb), 0.45);
}
@keyframes ir-tri-breathe {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(var(--ir-gold-rgb), 0.4)); }
  50%      { filter: drop-shadow(0 0 7px rgba(var(--ir-gold-rgb), 0.9)); }
}
@keyframes ir-tri-turn { 0%, 80% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

/* --------------------------------------------------------------------------
   Dungeon plates (base form). broadcast.html and items-full.html rearrange
   them into their own grids; this is the shape they start from.
   -------------------------------------------------------------------------- */
.dungeon-slot {
  position: relative; box-sizing: border-box; width: 52px; padding: 3px 2px;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--ir-hair-2); border-radius: 8px; background-color: rgba(31, 31, 36, 0.72);
  cursor: pointer; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.dungeon-slot.pendant-dungeon { flex-direction: row; width: auto; padding: 2px; }
.dungeon-content { display: flex; flex-direction: column; align-items: center; }
.dungeon-top-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.dungeon-top-row .dungeon-label { flex: 1 1 auto; }
.dungeon-label {
  height: 12px; white-space: nowrap; text-align: center;
  font: 700 10px/12px var(--ir-face); letter-spacing: 0.08em; color: var(--ir-paper);
}
.prize-img { width: 22px; height: 22px; }

.dungeon-items { display: flex; align-items: center; justify-content: center; }
.dungeon-items > * + * { margin-left: 2px; }
.pendant-dungeon .dungeon-items { flex-direction: column; }
.pendant-dungeon .dungeon-items > * + * { margin-left: 0; margin-top: 2px; }
.bigkey-img, .compass-img, .map-img { width: 16px; height: 16px; }
.dgn-items-tag { font: 700 8px/1 var(--ir-face); letter-spacing: 0.06em; color: var(--ir-paper-3); }

.dungeon-counts, .dungeon-counts-pendant { display: flex; flex-direction: column; align-items: center; }
.dungeon-counts { margin-top: 3px; }
.count-item { display: flex; align-items: center; }
.count-item > * + * { margin-left: 3px; }
.count-icon { width: 12px; height: 12px; }
.key-count, .item-count {
  font: 700 11px/1 var(--ir-face); font-variant-numeric: tabular-nums; color: var(--ir-paper); user-select: none;
}

/* Boss down, loot still inside: a green rim. */
.dungeon-slot.prize-obtained { border-color: rgba(var(--ir-ok-rgb), 0.6); }
/* Loot all found, boss still standing: a green floor line. */
.dungeon-slot.completed-items { box-shadow: inset 0 -2px 0 rgba(var(--ir-ok-rgb), 0.85); }
.dungeon-slot.completed-items .item-count { color: var(--ir-ok); }
/* Cleared: everything recedes under a green seal. */
.dungeon-slot.completed-full { border-color: rgba(var(--ir-ok-rgb), 0.75); background-color: rgba(26, 48, 35, 0.6); }
.dungeon-slot.completed-full .boss-circle, .dungeon-slot.completed-full .prize-img,
.dungeon-slot.completed-full .dungeon-label, .dungeon-slot.completed-full .dungeon-items,
.dungeon-slot.completed-full .count-item, .dungeon-slot.completed-full .dgn-full { opacity: 0.32; }
.dungeon-slot.completed-full::after {
  content: '\2713'; position: absolute; top: 50%; left: 50%; z-index: 6; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; box-sizing: border-box;
  border: 2px solid var(--ir-ok); border-radius: 50%;
  font: 900 16px/26px var(--ir-face); text-align: center; color: var(--ir-ok);
  background: rgba(14, 14, 16, 0.86);
  box-shadow: 0 0 0 3px rgba(var(--ir-ok-rgb), 0.18), 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Boss portrait (.boss-circle is the contract name; it is a rounded tile).
   Rim: green = you can kill it now, red = something is missing, plain =
   unknown or no rule. Greyed face = beaten.
   -------------------------------------------------------------------------- */
.boss-circle {
  flex: 0 0 auto; box-sizing: border-box; width: 24px; height: 24px; margin-top: 3px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30%;
  background: radial-gradient(circle at 50% 30%, #2C2C33, #121215 78%);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.boss-circle.boss-ok   { border-color: var(--ir-ok); }
.boss-circle.boss-need { border-color: var(--ir-bad); }
.boss-circle:hover { box-shadow: 0 0 0 2px rgba(var(--ir-gold-rgb), 0.35); }
/* Fixed faces (Agahnim on HC/AT, Agahnim 2 on GT) and vanilla-boss seeds
   have nothing to pick. */
.boss-circle.boss-fixed, html.boss-picks-off .boss-circle { cursor: default; }
.boss-circle.boss-fixed:hover, html.boss-picks-off .boss-circle:hover { box-shadow: none; }
.boss-img { width: 16px; height: 16px; pointer-events: none; transition: filter 0.2s, opacity 0.2s; }
.boss-circle.boss-defeated .boss-img { filter: grayscale(1) brightness(0.8); opacity: 0.45; }

/* Boss picker (opened from a portrait under boss shuffle). */
#boss-popup {
  position: fixed; z-index: 10000; display: none; padding: 8px;
  border: 1px solid var(--ir-hair-2); border-top: 2px solid var(--ir-gold); border-radius: 10px;
  background: var(--ir-ink-2); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  font-family: var(--ir-face);
}
#boss-popup.open { display: block; }
.boss-popup-head {
  margin: 1px 2px 8px; white-space: nowrap;
  font: 700 9px/1 var(--ir-face); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ir-paper-3);
}
.boss-popup-grid { display: grid; grid-template-columns: repeat(5, 38px); grid-gap: 4px; }
.boss-popup-item {
  box-sizing: border-box; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--ir-hair); border-radius: 9px; background: rgba(255, 255, 255, 0.03);
}
.boss-popup-item:hover { border-color: var(--ir-gold); background: rgba(var(--ir-gold-rgb), 0.13); }
.boss-popup-item.is-current { border-color: rgba(var(--ir-gold-rgb), 0.75); background: rgba(var(--ir-gold-rgb), 0.08); }
.boss-popup-item img { width: 28px; height: 28px; }
.boss-popup-clear {
  grid-column: 1 / -1; height: 24px; margin-top: 2px;
  border: 1px solid var(--ir-hair-2); border-radius: 7px; background: none;
  font: 600 11px/1 var(--ir-face); letter-spacing: 0.04em; color: var(--ir-paper-2); cursor: pointer;
}
.boss-popup-clear:hover { border-color: rgba(var(--ir-gold-rgb), 0.7); color: var(--ir-paper); }

/* --------------------------------------------------------------------------
   Run stats (checks / deaths / bonks / time): small-caps label, bright number.
   -------------------------------------------------------------------------- */
.stats-slot { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 4px; }
.stat-box { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 6px; cursor: pointer; }
.stat-box > * + * { margin-left: 6px; }
.stat-label {
  white-space: nowrap;
  font: 700 9px/1 var(--ir-face); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ir-paper-3);
}
.stat-value { font: 700 14px/1 var(--ir-face); font-variant-numeric: tabular-nums; color: var(--ir-paper); }
.stat-icon { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   Celebrations (tracker-full.js itemGetFx): the icon swells and flashes, a
   gold ring opens, and diamond sparks fly out along --dx / --dy.
   -------------------------------------------------------------------------- */
.ig-pop { animation: ir-get-swell 0.5s cubic-bezier(0.3, 1.6, 0.6, 1) !important; }
@keyframes ir-get-swell {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.42); filter: brightness(1.8) drop-shadow(0 0 9px rgba(var(--ir-gold-rgb), 0.95)); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.ig-fx { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; }
.ig-ring {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  box-sizing: border-box; border: 2px solid rgba(var(--ir-gold-rgb), 0.95); border-radius: 50%;
  animation: ir-get-ring 0.6s ease-out forwards;
}
@keyframes ir-get-ring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(var(--rs, 5)); opacity: 0; } }
.ig-spark {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--ir-gold-hi); opacity: 0;
  animation: ir-get-spark 0.7s ease-out forwards;
}
@keyframes ir-get-spark {
  0%   { transform: translate(0, 0) rotate(45deg) scale(0.5);                 opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(225deg) scale(1);  opacity: 0; }
}

/* A dungeon just cleared: the plate lifts and glows once. */
.dungeon-slot.dungeon-clear-fx { z-index: 20; animation: ir-plate-clear 1.4s cubic-bezier(0.3, 1.5, 0.6, 1); }
@keyframes ir-plate-clear {
  0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(var(--ir-gold-rgb), 0); }
  25%  { transform: scale(1.12); box-shadow: 0 0 22px rgba(var(--ir-gold-rgb), 0.9); }
  60%  { transform: scale(1);    box-shadow: 0 0 8px rgba(var(--ir-ok-rgb), 0.6); }
  100% { box-shadow: 0 0 0 rgba(var(--ir-ok-rgb), 0); }
}

/* GO lit: the gold sills under everything you hold pulse, row by row. */
.go-active .item-slot.filled::after { animation: ir-sill-pulse 2.4s ease-in-out infinite; }
.go-active .tracker-row:nth-child(2) .item-slot.filled::after { animation-delay: 0.3s; }
.go-active .tracker-row:nth-child(3) .item-slot.filled::after { animation-delay: 0.6s; }
.go-active .tracker-row:nth-child(4) .item-slot.filled::after { animation-delay: 0.9s; }
@keyframes ir-sill-pulse {
  0%, 100% { opacity: 0.7; box-shadow: none; }
  50%      { opacity: 1;   box-shadow: 0 0 6px 1px rgba(var(--ir-gold-rgb), 0.8); }
}