:root {
  --ink: #111519;
  --field: #242a30;
  --mist: #e9e9e4;
  --muted: #aeb4b5;
  --line: rgba(230, 233, 230, .32);
  --gold: #d8b653;
  --gold-bright: #f5da79;
  --rare: #674d91;
  --topbar: 54px;
}

* { box-sizing: border-box; }

html { background: var(--ink); color-scheme: dark; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--mist);
  background:
    radial-gradient(circle at 70% 38%, rgba(207, 191, 147, .09), transparent 28%),
    linear-gradient(118deg, #1d252b 0%, #2b3035 46%, #15191d 100%);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .015em;
}

button, a { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.geometry {
  position: fixed; inset: 55px 0 40px 34%; z-index: -1; opacity: .13; pointer-events: none;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(255,255,255,.25) 48%, transparent 49%),
    linear-gradient(150deg, transparent 47%, rgba(255,255,255,.15) 48%, transparent 49%);
  background-size: 240px 140px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 70%, transparent);
}

.global-nav {
  height: var(--topbar);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  padding: 0 clamp(18px, 3vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(10, 13, 16, .7);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 20;
  animation: nav-in .55s ease-out both;
}

.wordmark { color: #e8e9e5; text-decoration: none; display: flex; align-items: center; gap: 9px; letter-spacing: .22em; font-size: 11px; font-weight: 700; }
.wordmark svg { width: 28px; height: 28px; fill: currentColor; }
.global-nav nav { display: flex; height: 100%; gap: 26px; }
.global-nav nav button { position: relative; border: 0; background: transparent; font-size: 11px; letter-spacing: .2em; padding: 0 2px; opacity: .54; cursor: pointer; }
.global-nav nav button:hover, .global-nav nav button:focus-visible { opacity: 1; }
.global-nav nav button.active { opacity: 1; }
.global-nav nav button.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: #fff; box-shadow: 0 0 8px #fff; }
.guardian-status { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.guardian-status .season { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #8f9699; font-size: 10px; }
.light-mark { color: var(--gold-bright); }

.inspection-shell { min-height: calc(100vh - var(--topbar) - 38px); padding: 36px clamp(18px, 4vw, 72px) 30px; position: relative; }

.identity { position: relative; z-index: 4; display: flex; gap: 18px; max-width: 660px; animation: rise-in .65s .08s cubic-bezier(.2,.75,.25,1) both; }
.identity > div:last-child { min-width: 0; }
.rarity-mark { flex: 0 0 72px; width: 72px; height: 72px; border: 3px solid rgba(255,255,255,.8); background: linear-gradient(135deg, #785da6 0 64%, #2a2530 64%); position: relative; box-shadow: 0 0 0 2px var(--gold); overflow: hidden; }
.rarity-mark::before, .rarity-mark::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.55); transform: rotate(45deg); }
.rarity-mark::before { width: 42px; height: 42px; left: -5px; top: 12px; }
.rarity-mark::after { width: 20px; height: 20px; right: 5px; top: 7px; }
.rarity-mark span { position: absolute; left: 15px; top: 31px; width: 46px; height: 9px; border: 2px solid #f2e2af; transform: rotate(-19deg); }
.rarity-mark i { position: absolute; left: 42px; top: 15px; width: 8px; height: 42px; background: #ddd3a8; transform: rotate(39deg); }
.eyebrow { font-size: 10px; color: var(--gold-bright); letter-spacing: .3em; margin: 1px 0 4px; font-weight: 700; }
h1 { margin: 0; font-size: clamp(37px, 4.2vw, 67px); line-height: .92; letter-spacing: .035em; font-weight: 500; text-shadow: 0 3px 16px #000; }
.weapon-type { margin: 7px 0 0; color: #c9cccc; font-size: 18px; letter-spacing: .17em; }
.flavor { margin: 18px 0 0; max-width: 460px; color: #d2d3d0; font-size: 15px; font-style: italic; line-height: 1.35; }

.weapon-stage { position: absolute; z-index: 2; inset: 68px 0 auto 28%; height: min(46vw, 590px); pointer-events: none; animation: weapon-in 1s .18s cubic-bezier(.13,.82,.2,1) both; }
.weapon-art { width: 100%; height: 100%; overflow: visible; transform: translateX(3%); }
.weapon-glow { position: absolute; width: 56%; height: 20%; left: 30%; top: 44%; filter: blur(34px); background: rgba(211, 181, 111, .14); border-radius: 50%; }
.power-readout { position: absolute; right: 8%; top: 15%; z-index: 2; padding-left: 12px; border-left: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.power-readout span { font-size: 9px; letter-spacing: .23em; }
.power-readout strong { font-size: clamp(28px, 3.7vw, 54px); color: var(--gold-bright); font-weight: 400; }
.spec-line { position: absolute; right: 8%; bottom: 12%; display: flex; align-items: baseline; gap: 7px; border-top: 1px solid rgba(255,255,255,.4); padding-top: 7px; min-width: 190px; justify-content: flex-end; }
.spec-line span { font-size: 10px; letter-spacing: .22em; margin-right: auto; }
.spec-line b { font-size: 25px; font-weight: 400; }
.spec-line small { font-size: 9px; color: #b7bbbb; }

.workspace { position: relative; z-index: 5; margin-top: clamp(310px, 35vw, 485px); display: grid; grid-template-columns: minmax(580px, 1fr) minmax(310px, 390px); gap: clamp(30px, 5vw, 78px); align-items: end; animation: rise-in .75s .34s cubic-bezier(.2,.75,.25,1) both; }
.section-heading, .stats-top { border-bottom: 1px solid rgba(255,255,255,.45); display: flex; align-items: end; justify-content: space-between; padding-bottom: 7px; }
.section-heading h2, .stats h2 { margin: 0; font-size: 13px; letter-spacing: .16em; font-weight: 500; }
.section-heading p, .stats-top span { margin: 0; color: #b8bdbd; font-size: 9px; letter-spacing: .14em; }

.perk-columns { display: grid; grid-template-columns: repeat(5, minmax(102px, 1fr)); gap: 1px; min-height: 192px; }
.perk-column { position: relative; padding: 14px 11px 10px; border-right: 1px solid rgba(255,255,255,.12); }
.perk-column:last-child { border-right: 0; }
.perk-column-label { height: 24px; color: #b9bdba; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perk-list { display: flex; flex-wrap: wrap; gap: 7px; }
.perk-button { --icon-stroke: #d9dddc; position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(233,239,237,.44); border-radius: 50%; background: rgba(9,12,14,.38); cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.perk-button svg { width: 24px; height: 24px; stroke: var(--icon-stroke); stroke-width: 1.65; fill: none; vector-effect: non-scaling-stroke; }
.perk-button:hover, .perk-button:focus-visible { transform: scale(1.13); border-color: #fff; background: rgba(225,229,226,.14); outline: none; z-index: 2; }
.perk-button.selected { background: rgba(225,229,226,.88); border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.perk-button.selected svg { --icon-stroke: #20262b; }
.perk-button.recommended::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--gold-bright); border-radius: 50%; box-shadow: 0 0 12px rgba(245,218,121,.38); }
.perk-button.recommended.selected::after { animation: ring-pulse .55s ease-out; }
.perk-tooltip { position: fixed; z-index: 50; width: 220px; padding: 12px 14px; background: rgba(15,18,20,.97); border-top: 2px solid var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,.5); pointer-events: none; }
.perk-tooltip strong { display: block; font-size: 13px; letter-spacing: .08em; font-weight: 500; }
.perk-tooltip span { display: block; margin-top: 4px; font-size: 10px; line-height: 1.4; color: #aeb4b5; letter-spacing: .08em; }

.rolls { border-top: 1px solid rgba(255,255,255,.24); margin-top: 4px; padding-top: 9px; }
.rolls-heading { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; letter-spacing: .16em; }
.rolls-heading small { color: #969d9d; font-size: 8px; }
.roll-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.roll-tab { position: relative; text-align: left; padding: 10px 12px 9px; border: 0; border-right: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.025); cursor: pointer; overflow: hidden; }
.roll-tab:last-child { border-right: 0; }
.roll-tab::before { content: ""; position: absolute; inset: 0; transform: translateX(-102%); background: linear-gradient(90deg, transparent, rgba(235,211,134,.16), transparent); }
.roll-tab.active::before { animation: sweep .7s ease-out; }
.roll-tab::after { content: ""; position: absolute; height: 2px; left: 0; right: 100%; bottom: 0; background: var(--gold-bright); transition: right .25s ease; }
.roll-tab.active::after { right: 0; }
.roll-tab span { display: block; font-size: 12px; letter-spacing: .11em; }
.roll-tab small { display: block; margin-top: 3px; color: #8f9696; font-size: 8px; letter-spacing: .15em; }
.roll-tab:hover { background: rgba(255,255,255,.07); }
.roll-summary { margin: 9px 0 0; color: #d6d6cf; font-size: 11px; letter-spacing: .04em; min-height: 16px; }

.stats { padding-bottom: 2px; }
.stat-bars { padding: 13px 0 8px; }
.stat-row { display: grid; grid-template-columns: 142px 1fr 28px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.stat-row > span { text-align: right; color: #dedfdb; }
.stat-row strong { font-size: 12px; font-weight: 500; }
.bar { height: 7px; background: rgba(239,242,239,.11); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--value) * 1%); background: #e9e9e4; transform-origin: left; animation: bar-grow .8s .65s cubic-bezier(.2,.8,.2,1) both; }
.numeric-stats { border-top: 1px solid rgba(255,255,255,.18); padding: 8px 0; }
.numeric-stats div { display: flex; justify-content: flex-end; gap: 16px; font-size: 12px; line-height: 1.55; }
.numeric-stats span { color: #c3c6c3; }
.numeric-stats strong { min-width: 28px; font-weight: 500; }
.origin { border-top: 1px solid rgba(255,255,255,.34); padding-top: 10px; display: flex; align-items: center; gap: 11px; }
.origin-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); color: var(--gold-bright); font-size: 27px; }
.origin small, .origin strong { display: block; }
.origin small { font-size: 8px; color: #a8aeac; letter-spacing: .16em; }
.origin strong { margin-top: 3px; font-size: 11px; letter-spacing: .13em; font-weight: 500; }

footer { min-height: 38px; padding: 9px clamp(18px, 3vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(255,255,255,.18); background: rgba(8,10,12,.74); color: #92999a; font-size: 9px; letter-spacing: .1em; }
footer p { margin: 0; }
.controls { display: flex; gap: 18px; color: #c7c9c6; }
kbd { border: 1px solid #7f8788; padding: 2px 4px; border-radius: 2px; font: inherit; }

@keyframes nav-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes weapon-in { from { opacity: 0; transform: translateX(60px) scale(.97); filter: blur(5px); } }
@keyframes bar-grow { from { transform: scaleX(0); } }
@keyframes sweep { from { transform: translateX(-102%); } to { transform: translateX(102%); } }
@keyframes ring-pulse { 50% { transform: scale(1.18); box-shadow: 0 0 20px rgba(245,218,121,.72); } }

@media (max-width: 1040px) {
  .global-nav { grid-template-columns: 1fr auto; }
  .global-nav nav { display: none; }
  .guardian-status { grid-column: 2; }
  .workspace { grid-template-columns: minmax(510px, 1fr) 300px; gap: 28px; }
  .stat-row { grid-template-columns: 112px 1fr 25px; }
  .perk-column { padding-inline: 6px; }
}

@media (max-width: 820px) {
  .inspection-shell { padding-top: 24px; }
  .identity { gap: 13px; }
  .rarity-mark { width: 58px; height: 58px; flex-basis: 58px; }
  .weapon-stage { position: relative; inset: auto; height: clamp(235px, 52vw, 390px); margin: 5px -8% 0 -16%; }
  .power-readout { right: 11%; top: 4%; }
  .spec-line { bottom: 0; right: 8%; }
  .workspace { margin-top: 16px; grid-template-columns: 1fr; align-items: start; }
  .stats { max-width: 520px; }
  .perk-columns { grid-template-columns: repeat(5, minmax(92px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .perk-column { min-width: 92px; }
}

@media (max-width: 560px) {
  :root { --topbar: 48px; }
  .global-nav { padding-inline: 14px; }
  .wordmark span { display: none; }
  .guardian-status { font-size: 11px; }
  .inspection-shell { min-height: auto; padding: 20px 16px 32px; }
  .rarity-mark { width: 49px; height: 49px; flex-basis: 49px; border-width: 2px; }
  .rarity-mark span { left: 8px; top: 24px; width: 35px; }
  .rarity-mark i { left: 30px; top: 8px; height: 33px; }
  h1 { font-size: clamp(26px, 7.4vw, 34px); letter-spacing: .02em; white-space: nowrap; }
  .eyebrow { font-size: 8px; }
  .weapon-type { font-size: 13px; }
  .flavor { margin-top: 12px; font-size: 13px; }
  .weapon-stage { height: 225px; margin: 8px -12% 0 -14%; }
  .weapon-art { transform: translateX(1%); }
  .weapon-stage .power-readout { right: auto; left: 48%; top: 0; }
  .power-readout strong { font-size: 29px; }
  .spec-line { right: auto; left: 48%; bottom: -1px; min-width: 155px; }
  .spec-line span { font-size: 8px; }
  .perk-columns { margin-right: -16px; padding-right: 16px; scroll-snap-type: x proximity; }
  .perk-column { scroll-snap-align: start; }
  .section-heading p { display: none; }
  .roll-tab { padding-inline: 8px; }
  .roll-tab span { font-size: 10px; }
  .roll-tab small { font-size: 7px; }
  .roll-summary { font-size: 10px; line-height: 1.4; }
  .stat-row { grid-template-columns: 120px 1fr 26px; }
  footer { align-items: flex-start; }
  .controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}