/* MZO site: arsenal page (/arsenal.php: weapon kit, weapon records, wonder weapons). Loads after core.css. */

.arsenal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 45% at 70% 62%, rgba(40, 110, 220, .2), transparent 70%), linear-gradient(180deg, transparent, rgba(40, 6, 14, .35) 40%, transparent); }
/* class tabs centred on the page with their arrows either side; when they don't fit (phone) they shrink and scroll */
.class-bar { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin: 0.5rem 0 1.625rem; padding: 0.5rem 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(90deg, transparent, rgba(80, 100, 150, .12) 30%, rgba(80, 100, 150, .12) 70%, transparent); }
.class-bar .class-tabs { flex: 0 1 auto; min-width: 0; }
.class-arrow { flex: none; width: 2rem; height: 2rem; border: 1px solid var(--frame); background: rgba(10, 12, 16, .8); position: relative; transition: border-color .2s, background .2s; }
.class-arrow::after { content: ""; position: absolute; left: 0.8125rem; top: 0.6875rem; width: 0.4375rem; height: 0.4375rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.class-arrow.next::after { left: 0.5625rem; transform: rotate(-135deg); }
.class-arrow:hover { border-color: #fff; background: var(--violet); }
.class-tabs { display: flex; gap: 0.375rem 1.875rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; }
.class-tabs::-webkit-scrollbar { display: none; }
.class-tab { position: relative; flex: none; padding: 0.375rem 2px 0.5625rem; font: 500 max(11px, 1.125rem) var(--body); letter-spacing: .04em; color: var(--nav); white-space: nowrap; transition: color .15s; }
.class-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.1875rem; background: var(--tab-line); box-shadow: 0 0 0.625rem rgba(80, 165, 193, .8); transform: scaleX(0); transition: transform .3s var(--ease); }
.class-tab:hover, .class-tab.is-active { color: #fff; }
.class-tab.is-active::after { transform: none; }
.ars-grid { display: grid; grid-template-columns: minmax(17.5rem, 21.875rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.list-head { display: flex; justify-content: space-between; align-items: end; margin: 0 0 0.5rem; padding: 0.25rem 0.375rem; font: 700 max(11px, 0.9375rem) var(--body); letter-spacing: .08em; color: var(--badge); background: linear-gradient(180deg, transparent, rgba(80, 100, 150, .22)); border-bottom: 1px solid rgba(160, 180, 220, .5); }
.list-head b { font: 700 max(11px, 0.75rem) var(--head); color: var(--muted); }
.wpn-rows { display: grid; gap: 0.25rem; max-height: 34.25rem; overflow-y: auto; padding-right: 0.5rem; scrollbar-width: thin; scrollbar-color: #5a626d transparent; }
.wpn-row { position: relative; height: 4rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; align-items: center; padding: 0 0.75rem 0 0.5rem; text-align: left; background: rgba(14, 16, 21, .9); border: 1px solid #23272f; transition: border-color .15s, background .15s; animation: row-in .4s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.wpn-row::before { content: ""; position: absolute; left: 0; top: 0; width: 2.125rem; height: 2px; background: #444b53; transition: width .3s var(--ease), background .2s; }
.wpn-row img { width: 100%; height: 2.875rem; object-fit: contain; filter: brightness(.85); transition: filter .2s, transform .3s var(--ease); }
.wpn-row .no-img { height: 2.875rem; display: grid; place-items: center; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .1em; color: #4a515b; border: 1px dashed #2f353e; }
.wpn-row b { display: block; font: 700 max(11px, 1.0625rem) / 1.05 var(--head); letter-spacing: .02em; }
.wpn-row > span { min-width: 0; }
.wpn-row small { font: 500 max(11px, 0.875rem) var(--body); color: var(--muted); letter-spacing: .04em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpn-row:hover { border-color: #59626d; }
.wpn-row:hover img { filter: none; transform: translateX(0.1875rem); }
.wpn-row.is-active { border-color: var(--violet-2); background: linear-gradient(90deg, rgba(96, 30, 236, .22), rgba(14, 16, 21, .9) 70%); }
.wpn-row.is-active::before { width: 3.75rem; background: var(--violet-2); box-shadow: 0 0 0.5rem var(--violet-2); }
.wpn-row.is-active img { filter: none; }
.wpn-row.is-off b { color: #7d8590; }
.wpn-row .lock { position: absolute; right: 0.5rem; top: 0.375rem; font: 700 max(10px, 0.625rem) var(--head); letter-spacing: .1em; color: var(--amber); }
.ars-top { display: flex; align-items: flex-start; gap: 1.375rem; }
.lvl-ring { position: relative; flex: none; width: 4.75rem; text-align: center; }
.lvl-ring small { display: block; font: 500 max(11px, 0.875rem) var(--body); letter-spacing: .08em; margin-bottom: 0.25rem; }
.lvl-ring svg { display: block; width: 4.75rem; height: 4.75rem; stroke-width: 3; transform: rotate(-90deg); }
.lvl-ring circle { stroke: rgba(255, 255, 255, .14); }
.lvl-ring .arc { stroke: var(--cyan); stroke-dasharray: 213.6; stroke-dashoffset: calc(213.6 * (1 - var(--p, 0))); transition: stroke-dashoffset .7s var(--ease); filter: drop-shadow(0 0 0.25rem var(--cyan)); }
.lvl-num { position: absolute; left: 0; right: 0; top: 2.8125rem; font: 700 max(11px, 1.625rem) var(--head); }
.lvl-max { display: block; font: 700 max(11px, 0.75rem) var(--head); color: var(--muted); letter-spacing: .1em; margin-top: 0.25rem; }
.ars-id { flex: 1; min-width: 0; }
.wpn-name { font: 900 clamp(max(11px, 2.125rem), 4.6vw, 4rem) / 1 var(--head); letter-spacing: .02em; margin-top: 0.375rem; overflow-wrap: anywhere; }
.wpn-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.wpn-tags span { padding: 1px 0.5625rem 2px; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .12em; color: var(--badge); border: 1px solid rgba(98, 213, 241, .45); background: rgba(13, 36, 51, .6); }
/* a route gun's unlock: the whole route, may wrap */
.wpn-tags .route { color: #c9b8ff; border-color: rgba(138, 92, 246, .55); background: rgba(34, 20, 66, .6); white-space: normal; }
.wpn-tags .warn { color: var(--amber); border-color: rgba(242, 178, 60, .5); background: rgba(60, 40, 6, .5); }
.wpn-stage { position: relative; height: clamp(10.625rem, 24vw, 20.625rem); margin: 0.375rem 0 0.875rem; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; }
.wpn-floor { position: absolute; left: 4%; right: 4%; bottom: 4%; height: 38%; background: radial-gradient(60% 100% at 50% 100%, rgba(60, 140, 255, .32), transparent 70%), repeating-linear-gradient(90deg, rgba(120, 180, 255, .09) 0 1px, transparent 1px 1.625rem); transform: perspective(37.5rem) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(0deg, #000, transparent); }
/* the gun fits the stage box both ways (compact pistols / SMGs are taller than rifles): absolute + contain */
.wpn-img { position: absolute; inset: 4% 0; margin: auto; width: 100%; max-width: 53.75rem; height: 92%; object-fit: contain; filter: drop-shadow(0 1.625rem 1.875rem rgba(0, 0, 0, .75)); transition: filter .4s; }
.wpn-img.is-in { animation: gun-in .55s var(--ease) both; }
.wpn-stage[data-tier="1"] .wpn-img { filter: drop-shadow(0 1.625rem 1.875rem rgba(0, 0, 0, .75)) drop-shadow(0 0 0.875rem rgba(98, 213, 241, .5)); }
.wpn-stage[data-tier="2"] .wpn-img { filter: drop-shadow(0 1.625rem 1.875rem rgba(0, 0, 0, .75)) drop-shadow(0 0 1.125rem rgba(138, 92, 246, .7)) saturate(1.2); }
.wpn-stage[data-tier="3"] .wpn-img { filter: drop-shadow(0 1.625rem 1.875rem rgba(0, 0, 0, .75)) drop-shadow(0 0 1.375rem rgba(255, 106, 43, .75)) saturate(1.35) brightness(1.08); }
.ars-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2.125rem; align-items: start; }
.pap-tiers { display: flex; gap: 0.5rem; }
.pap-tier { width: 3.625rem; height: 3.625rem; display: grid; place-items: center; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .1em; color: var(--muted); border: 1px solid var(--frame); background: rgba(10, 12, 16, .8); transition: border-color .15s, background .15s, color .15s, transform .2s var(--snap); }
.pap-tier img { height: 1.875rem; width: auto; opacity: .6; transition: opacity .15s; }
.pap-tier:hover { border-color: #fff; color: #fff; transform: translateY(-2px); }
.pap-tier.is-active { border-color: #d7c9ff; color: #fff; background: linear-gradient(180deg, #7334ff, var(--violet) 45%, #4a12c4); box-shadow: 0 0 1.375rem rgba(96, 30, 236, .55); }
.pap-tier:hover img, .pap-tier.is-active img { opacity: 1; }
.pap-cost { margin: 0.625rem 0 0; min-height: 2.75rem; font-size: max(11px, 1rem); color: #c3c9d0; }
.pap-cost b { color: var(--gold); font: 700 max(11px, 1.125rem) var(--head); }
.stats-head { display: flex; gap: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.stats-head span, .stats-head button { padding: 0 0.875rem 0.375rem; font: inherit; font-size: max(11px, 0.9375rem); letter-spacing: inherit; color: var(--muted); transition: color .15s, box-shadow .2s; }
.stats-head button:hover { color: #fff; }
.stats-head .is-on { color: #fff; box-shadow: inset 0 -0.1875rem var(--tab-line); }
/* live: Arsenal rarity row (T10 weapon upgrade machine), damage readout, MASTERY pane, your level on rows */
.rar-head { margin-top: 1rem; }
.rar-tiers { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rar-tier { --c: var(--frame-hi); height: 2rem; padding: 0 0.625rem; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .1em; color: var(--muted); border: 1px solid var(--frame); border-bottom: 2px solid var(--c); background: rgba(10, 12, 16, .8); transition: color .15s, background .15s, border-color .15s, transform .2s var(--snap); }
.rar-tier.r-uncommon { --c: #5fd38a; } .rar-tier.r-rare { --c: #4aa8ff; } .rar-tier.r-epic { --c: var(--r-epic); } .rar-tier.r-legendary { --c: var(--r-legendary); }
.rar-tier:hover { color: #fff; transform: translateY(-2px); }
.rar-tier.is-active { color: #fff; border-color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, transparent), rgba(10, 12, 16, .85)); box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 35%, transparent); }
.dmg-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; margin: 0.375rem 0 0; font: 500 max(11px, 0.8125rem) var(--mono); letter-spacing: .1em; color: var(--muted); }
.dmg-line b { font: 700 max(11px, 1.5rem) var(--head); color: #fff; letter-spacing: 0; }
.dmg-note { font: 500 max(11px, 0.8125rem) var(--body); letter-spacing: .04em; }
.wpn-stage[data-rar="1"] .wpn-floor { filter: hue-rotate(-80deg); } .wpn-stage[data-rar="3"] .wpn-floor { filter: hue-rotate(50deg); } .wpn-stage[data-rar="4"] .wpn-floor { filter: hue-rotate(170deg) saturate(1.4); }
.wpn-tags .mine { color: var(--gold); border-color: rgba(239, 215, 11, .5); background: rgba(50, 44, 4, .5); }
.wpn-row .row-lv { position: absolute; right: 0.5rem; top: 0.375rem; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .1em; color: var(--gold); }
.wpn-row .row-lv.is-zero { color: #4a515b; }
.pane-mastery { padding-top: 0.75rem; }
.m-level { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.875rem; align-items: center; }
.m-level > b { grid-row: span 2; font: 900 max(11px, 3rem) / 1 var(--head); color: var(--gold); }
.m-level > span { font: 700 max(11px, 0.875rem) var(--head); letter-spacing: .12em; }
.m-level small { margin-left: 0.5rem; color: var(--muted); }
.m-bar { position: relative; height: 0.5rem; color: rgba(255, 255, 255, .13); background: var(--ticks); }
.m-bar i { position: absolute; inset: 0; color: var(--gold); background: var(--ticks); clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); transition: clip-path .6s var(--ease); }
.m-level p { grid-column: 1 / -1; margin: 0.25rem 0 0; font: 500 max(11px, 0.8125rem) var(--mono); letter-spacing: .08em; color: var(--muted); }
.m-camos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; margin-top: 0.875rem; }
.m-camos span { padding: 0.375rem 0.25rem; text-align: center; font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .1em; color: #59616c; border: 1px dashed #2f353e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-camos .is-done { color: #fff; border: 1px solid var(--r-legendary); background: linear-gradient(180deg, rgba(255, 140, 31, .3), transparent); }
.sign-box { display: grid; gap: 0.75rem; padding: 0.875rem 0 0; }
.sign-box p { margin: 0; font-size: max(11px, 0.9375rem); color: #c3c9d0; }
.sign-box .big-btn { height: 2.75rem; font-size: max(11px, 1.0625rem); }
/* WEAPON RECORDS band */
.page-main > .rec-sec { padding-top: 0; }
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.rec-card { min-width: 0; padding: 0.875rem 1rem 1rem; background: var(--panel); border: 1px solid var(--frame); }
.rec-card .mini-head { display: flex; justify-content: space-between; padding-bottom: 0.375rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rec-card .mini-head span { color: #5d6570; }
.rec-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
.rec-kv { min-width: 0; padding: 0.375rem 0.5rem; background: var(--row); border-left: 2px solid #3a414b; }
.rec-kv span { display: block; font: 500 max(11px, 0.75rem) var(--mono); letter-spacing: .1em; color: var(--muted); }
.rec-kv b { display: block; font: 700 max(11px, 1.375rem) / 1.15 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-kv small { font-size: max(11px, 0.75rem); color: var(--muted); }
.rec-me .rec-kv { border-left-color: var(--gold); }
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.rec-list a { display: grid; grid-template-columns: 1.25rem 2.25rem minmax(0, 1fr) 2.25rem auto; gap: 0.625rem; align-items: center; height: 3rem; padding: 0 0.625rem 0 0.375rem; background: var(--row); border: 1px solid #1d2128; transition: border-color .15s, background .15s; }
.rec-list a:hover { border-color: var(--violet-2); background: linear-gradient(90deg, rgba(96, 30, 236, .2), var(--row) 70%); }
.rec-list .pos { font: 700 max(11px, 0.875rem) var(--head); color: var(--muted); text-align: center; }
.rec-list img { width: 2.25rem; height: 2.25rem; object-fit: cover; }
.rec-list .nm { min-width: 0; font: 700 max(11px, 1rem) / 1.1 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-list .nm small { display: block; font: 500 max(11px, 0.75rem) var(--body); color: var(--muted); letter-spacing: .04em; }
.rec-list .lv { font: 700 max(11px, 1.125rem) var(--head); color: var(--gold); text-align: center; }
.rec-list .xp { font: 500 max(11px, 0.8125rem) var(--mono); color: #c3c9d0; text-align: right; }
.rec-empty { margin: 0.5rem 0 0; color: var(--muted); font-size: max(11px, 0.9375rem); }
.stat { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; gap: 0.75rem; align-items: center; margin-top: 0.5625rem; font: 500 max(11px, 0.875rem) var(--mono); letter-spacing: .1em; color: #c9d0d8; }
.stat i { position: relative; height: 0.5rem; color: rgba(255, 255, 255, .13); background: var(--ticks); }
.stat i::after { content: ""; position: absolute; inset: 0; color: #eef2f6; background: var(--ticks); clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); transition: clip-path .6s var(--ease); }
.stat b { font: 700 max(11px, 0.875rem) var(--head); text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.stat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.625rem; margin-top: 1rem; }
.fire-chip { padding: 2px 0.625rem; font: 500 max(11px, 0.875rem) var(--body); letter-spacing: .06em; background: rgba(120, 135, 160, .28); border-left: 0.1875rem solid #cfd6dd; }
.kv { font: 500 max(11px, 0.8125rem) var(--mono); letter-spacing: .1em; color: var(--muted); }
.kv b { font: 700 max(11px, 1.625rem) var(--head); color: #fff; margin-left: 0.5rem; vertical-align: -0.1875rem; letter-spacing: 0; }
.ww { margin-top: 3.5rem; }
.page-main > .ww-sec { padding-top: 0; }
.ww-sec .ww { margin-top: 0; }
.ww-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.ww-card { position: relative; height: 9.375rem; padding: 0.75rem 0.875rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: linear-gradient(160deg, rgba(40, 20, 80, .55), rgba(10, 11, 15, .9) 60%); border: 1px solid var(--frame); transition: border-color .2s, transform .3s var(--ease), box-shadow .3s; }
.ww-card img { position: absolute; right: -4%; top: 8%; width: 78%; height: 62%; object-fit: contain; filter: drop-shadow(0 0.5rem 0.75rem #000); transition: transform .5s var(--ease); }
.ww-card b { position: relative; font: 900 max(11px, 1.1875rem) / 1 var(--head); }
.ww-card small { position: relative; font: 700 max(11px, 0.6875rem) var(--head); letter-spacing: .14em; color: var(--r-legendary); }
.ww-card:hover { border-color: var(--r-legendary); transform: translateY(-0.25rem); box-shadow: 0 0 1.875rem rgba(255, 140, 31, .25); }
.ww-card:hover img { transform: scale(1.1) rotate(-4deg); }
/* not in the mod yet: dimmed card + COMING SOON plate (the BO7 kit's locked look) */
.ww-card.is-soon img { filter: drop-shadow(0 0.5rem 0.75rem #000) grayscale(.7) brightness(.55); }
.ww-card.is-soon > b, .ww-card.is-soon > small { opacity: .45; }
.ww-card .soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.25rem; text-align: center; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .35) 0 0.375rem, rgba(0, 0, 0, .15) 0.375rem 0.75rem); }
.ww-card .soon b { padding: 0.25rem 0.875rem; font: 900 max(11px, 1rem) var(--head); letter-spacing: .14em; color: #fff; background: rgba(10, 11, 15, .85); border: 1px solid var(--amber); box-shadow: 0 0 1rem rgba(242, 178, 60, .25); }
.ww-card .soon small { font: 700 max(10px, 0.6875rem) var(--head); letter-spacing: .14em; color: var(--amber); }
.ww-card.is-soon:hover { border-color: var(--amber); transform: none; box-shadow: none; }
.ww-card.is-soon:hover img { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.wpn-row, .tile, .screen-icons img { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1080px) {
	.ars-grid, .load-grid, .notes-grid { grid-template-columns: minmax(0, 1fr); }
	.wpn-rows, .note-list { grid-auto-flow: column; grid-auto-columns: 15.625rem; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 0 0 0.5rem; }
	.ww-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rec-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ars-top { gap: 0.875rem; }
	.ars-bottom { grid-template-columns: minmax(0, 1fr); gap: 1.375rem; }
	.stat { grid-template-columns: 5.75rem 1fr 2.125rem; gap: 0.5rem; }
}