/* v2 showcase glue on top of the compiled deepsight stylesheet */
html { font-size: 16px; }
body { min-height: 100vh; }
body::before { opacity: .9; }
body::after {
  content:''; position: fixed; inset: 0;
  background: radial-gradient(#222a, #111);
  z-index: -1;
}
.view { display: none; min-height: calc(100vh - 96px); }
.view.active { display: block; }

.sc-banner {
  display: flex; align-items: center; gap: 2rem;
  padding: .8rem 2rem;
  background: rgba(10,10,12,.72);
  border-bottom: 1px solid rgba(244,241,234,.18);
  backdrop-filter: blur(10px);
}
.sc-brand { font-weight: var(--weight-black); letter-spacing: .35em; font-size: 1.05rem; color: var(--light-0, #fff); }
.sc-tabs { display: flex; gap: .25rem; margin-left: auto; }
.sc-tab {
  font-size: .8rem; letter-spacing: .2em; text-decoration: none;
  color: var(--light-8, #aaa); padding: .45rem 1rem; border: 1px solid transparent;
}
.sc-tab.current { color: #fff; border-color: rgba(244,241,234,.4); background: rgba(244,241,234,.06); }

.stage { display: flex; gap: 3rem; justify-content: center; align-items: flex-start; padding: 4rem 2rem; flex-wrap: wrap; }
.sc-offset { margin-top: 3rem; }

.item-tooltip {
  width: 24rem;
  font-family: inherit;
  filter: drop-shadow(0 1.2rem 3rem rgba(0,0,0,.6));
}
.item-tooltip-header { display: grid; padding: var(--space-3) var(--space-3); gap: var(--space-3); align-items: start; }
.item-tooltip-title { text-transform: uppercase; letter-spacing: var(--letter-spacing-1, .06em); font-weight: var(--weight-bold); color: #fff; margin: 0; }
.item-tooltip--exotic .item-tooltip-title,
.item-tooltip--exotic .item-tooltip-subtitle { color: #221c08; }
.item-tooltip-subtitle { display: flex; justify-content: space-between; font-style: italic; font-family: Georgia, serif; font-size: .9rem; opacity: .8; }
.item-tooltip-watermark { position: relative; display: block; width: 2rem; height: 2.5rem; }
.item-tooltip-watermark-tier { display: flex; flex-direction: column; gap: 4px; }
.item-tooltip-watermark-tier-dot { width: 6px; height: 6px; display: block; }

.item-tooltip-primary-info { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); font-size: 1rem; }
.item-tooltip-type { display: flex; gap: var(--space-2); align-items: center; text-transform: uppercase; letter-spacing: .12em; color: #ddd; }
.item-tooltip-power { color: var(--colour-power); font-weight: var(--weight-bold); font-size: 1.4rem; }

.item-tooltip-source { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: .85rem; color: #ccc; }
.item-tooltip-source-subtitle { display: block; opacity: .6; }

.item-tooltip-stats { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) var(--space-3); }
.v2-stat { display: grid; grid-template-columns: 7.5rem 1fr 2rem; gap: var(--space-2); align-items: center; font-size: .82rem; color: #eee; }
.v2-stat b { text-align: right; font-weight: var(--weight-semibold); color: #fff; }
.v2-bar { height: .55rem; background: rgba(255,255,255,.14); position: relative; }
.v2-bar i { position: absolute; inset: 0; width: var(--v, 0%); background: #fff; display: block; }
.v2-bar--none { background: transparent; }

.item-tooltip-perks { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
.v2-perk { display: flex; gap: var(--space-2); align-items: flex-start; }
.v2-perk-ico { width: 2rem; height: 2rem; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.v2-perk--intrinsic .v2-perk-ico { border-radius: .25rem; background: var(--colour-frame); border-color: transparent; }
.v2-perk b { font-size: .85rem; }
.v2-perk p { font-size: .78rem; color: #bbb; margin: 2px 0 0; }
.v2-perk--intrinsic b { color: #cfe3ff; }

.v2-catalyst { padding: var(--space-2) var(--space-3); border-top: 2px solid #666d; font-size: .82rem; }
.v2-objective { display: flex; gap: .6rem; align-items: center; margin-top: .4rem; color: #ccc; }
.v2-checkbox { width: .9rem; height: .9rem; border: 1.5px solid #888; display: inline-block; }

/* inventory */
.loadout-grid { display: flex; gap: 3rem; padding: 3rem 4rem; align-items: flex-start; flex-wrap: wrap; }
.loadout-head { font-size: .8rem; letter-spacing: .3em; color: #bbb; margin: 0 0 .8rem; }
.v2-slot-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.v2-slot-label { font-size: .75rem; letter-spacing: .2em; color: #999; text-transform: uppercase; }
.v2-item {
  width: 4rem; height: 4rem; position: relative;
  border: 2px solid var(--item-rarity-border-colour, #666);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, color-mix(in lch, var(--item-rarity-background-colour, #333) 92%, white), var(--item-rarity-background-colour, #333));
}
.v2-item--common { --item-rarity-background-colour: var(--colour-rarity-common-1); --item-rarity-border-colour: var(--colour-rarity-common-2); }
.v2-item--uncommon { --item-rarity-background-colour: var(--colour-rarity-uncommon-1); --item-rarity-border-colour: var(--colour-rarity-uncommon-2); }
.v2-item--rare { --item-rarity-background-colour: var(--colour-rarity-rare-1); --item-rarity-border-colour: var(--colour-rarity-rare-2); }
.v2-item--legendary { --item-rarity-background-colour: var(--colour-rarity-legendary-1); --item-rarity-border-colour: var(--colour-rarity-legendary-2); }
.v2-item--exotic { --item-rarity-background-colour: var(--colour-rarity-exotic-1); --item-rarity-border-colour: var(--colour-rarity-exotic-2); }
.v2-item--masterworked { box-shadow: 0 0 0 1px var(--colour-masterwork-2), 0 0 12px 1px rgba(236,202,62,.45); }
.v2-item-wm { position: absolute; inset: 0; background: radial-gradient(circle at 60% 60%, rgba(0,0,0,.25), transparent 55%); }
.v2-power { position: absolute; right: 2px; bottom: 0; font-size: .7rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.v2-inventory { display: grid; grid-template-columns: repeat(5, 4rem); gap: .5rem; }
.v2-inventory--armour { grid-template-columns: repeat(5, 4rem); }
.v2-stats-panel { margin-top: 2rem; background: rgba(10,10,12,.72); border: 1px solid rgba(255,255,255,.14); padding: 1rem 1.2rem; width: 16rem; }
.v2-a-stat { display: grid; grid-template-columns: 1fr auto 2.5rem; gap: .8rem; font-size: .85rem; padding: .3rem 0; color: #ddd; }
.v2-a-stat b { color: #fff; }
.v2-tiers { text-align: right; color: #999; font-size: .75rem; align-self: center; }

.sc-foot {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between;
  padding: .7rem 1.6rem; background: rgba(10,10,12,.8); border-top: 1px solid rgba(244,241,234,.14);
  font-size: .75rem; letter-spacing: .15em; color: #999;
}
.sc-mono { font-family: ui-monospace, monospace; letter-spacing: 0; }