/* MZO site: home page sections (hero lobby, features screen, arsenal + career overviews, loadout, patch notes,
   download). Loads after core.css. */

.label-row { display: flex; justify-content: space-between; align-items: end; font: 700 max(11px, 1.0625rem) var(--body); letter-spacing: .08em; margin: 0 0 0.625rem; }
.label-row .count { font-size: max(11px, 0.9375rem); color: var(--muted); }
.label-row .count b { color: var(--text); font-variant-numeric: tabular-nums; }
.hero {
	position: relative; min-height: 100vh; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 31.25rem); gap: 2.5rem 4rem; align-items: center;
	padding: 6.5rem var(--g) 1.75rem; grid-template-rows: 1fr auto;
}
.hero-art { position: absolute; inset: 0; z-index: -1; background: #000; }
.hero-art::before {
	content: ""; position: absolute; inset: -4%;
	background: url("../assets/bg_kowakujo.webp") 62% 40% / cover;
	filter: saturate(.85) brightness(.55);
	animation: kenburns 40s ease-in-out infinite alternate;
}
.hero-art::after { /* darken left (text side), bottom, top */
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 3, 6, .96) 0%, rgba(4, 3, 6, .7) 38%, rgba(4, 3, 6, .25) 70%, rgba(4, 3, 6, .65) 100%),
		linear-gradient(0deg, var(--bg) 0%, transparent 30%),
		linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 22%);
}
.fog { position: absolute; z-index: 1; left: 35%; top: 15%; width: 70vw; height: 70vh; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(156, 21, 4, .5), rgba(156, 21, 4, .15) 55%, transparent); mix-blend-mode: screen;
	animation: fog 18s ease-in-out infinite alternate; }
.fog.f2 { left: 55%; top: 45%; width: 50vw; height: 50vh; background: radial-gradient(closest-side, rgba(110, 40, 220, .35), transparent); animation-duration: 24s; animation-direction: alternate-reverse; }
.embers { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.kicker { font: 700 max(11px, 0.875rem) var(--head); letter-spacing: .1em; color: var(--muted); margin: 0 0 1.125rem; }
.hero-title { font-weight: 900; font-size: clamp(max(11px, 3.25rem), 7.6vw, 8rem); line-height: .9; letter-spacing: .01em; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .ln > span { display: inline-block; transform: translateY(110%); }
body.is-ready .hero-title .ln > span { animation: rise 1s var(--ease) forwards; }
body.is-ready .hero-title .ln:nth-child(2) > span { animation-delay: .12s; }
body.is-ready .hero-title .ln:nth-child(3) > span { animation-delay: .24s; }
.hero-title .glow { color: transparent; -webkit-text-stroke: 2px #fff; position: relative; }
.hero-title .glow::after { /* filled copy that wipes across, then flickers like a BO7 title */
	content: "OVERHAUL"; position: absolute; left: 0; top: 0; color: #fff; -webkit-text-stroke: 0;
	text-shadow: 0 0 1.875rem rgba(156, 21, 4, .9), 0 0 5rem rgba(156, 21, 4, .5);
	clip-path: inset(0 100% 0 0); animation: wipe 1.1s var(--ease) 1.1s forwards, flick 7s steps(1) 3s infinite;
}
.lede { max-width: 40rem; font-size: max(11px, 1.25rem); color: #c3c9d0; margin: 1.5rem 0 2.125rem; }
.match-cta { display: flex; align-items: stretch; gap: 1.25rem; max-width: 40rem; }
.match-box {
	position: relative; flex: 1; display: flex; flex-direction: column;
	border: 1px solid #4a505a; background: rgba(8, 9, 12, .7); overflow: hidden;
	transition: border-color .2s, box-shadow .3s;
}
.match-box::before { /* violet fill that sweeps in on hover */
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: url("../assets/fx_btn_pattern.webp") 0 0 / 200% 100%, linear-gradient(90deg, var(--violet), #3d12a6);
	background-blend-mode: soft-light;
	transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.match-box > * { position: relative; z-index: 1; }
.match-box:hover { border-color: #fff; box-shadow: 0 0 2.5rem rgba(96, 30, 236, .45); }
.match-box:hover::before { transform: none; animation: pattern 6s linear infinite; }
.match-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; font: 500 max(11px, 1.0625rem) var(--body); letter-spacing: .08em; color: #c9d0d8; border-bottom: 1px solid #4a505a; }
.match-head i { font-style: normal; color: var(--muted); }
.match-dots { flex: 1; height: 0.5rem; margin-left: 0.625rem; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 0.25rem) 0 50% / 4.375rem 0.375rem no-repeat; }
.match-title { padding: 0.5rem 0.75rem 0; font: 900 clamp(max(11px, 2.125rem), 4vw, 3.25rem) / 1 var(--head); letter-spacing: .02em; }
.match-sub { padding: 0.375rem 0.75rem 0.75rem; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--muted); transition: color .2s; }
.match-box:hover .match-sub { color: #fff; }
.match-side { width: 8.375rem; display: flex; align-items: center; justify-content: center; gap: 1.375rem; border: 1px solid #4a505a; background: rgba(8, 9, 12, .7); transition: border-color .2s, background .2s; }
.match-side svg { width: 1.875rem; height: 1.875rem; }
.match-side .ok { stroke-width: 3; }
.match-side:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.hero-right { align-self: start; margin-top: 2.5rem; }
.pager { display: flex; gap: 0.25rem; }
.pager button { width: 1.125rem; height: 0.25rem; border: 1px solid rgba(120, 160, 220, .5); transition: background .3s, width .3s var(--ease); }
.pager button.is-on { background: var(--cyan); border-color: var(--cyan); width: 1.625rem; }
.feat { padding: 0.75rem; }
.feat-stage { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; background: #000; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent 55%), linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30%); }
.slide > span { position: relative; z-index: 1; padding: 0.75rem 1rem; }
.slide .s-kick { font: 500 max(11px, 1.0625rem) var(--body); letter-spacing: .06em; }
.slide .s-foot { display: flex; flex-direction: column; gap: 0.375rem; }
.slide .s-tag { align-self: flex-start; font: 500 max(11px, 0.9375rem) var(--body); padding: 1px 0.625rem; background: rgba(65, 76, 97, .85); color: #b9c8e4; }
.slide .s-title { font: 900 clamp(max(11px, 1.5rem), 2.4vw, 2.125rem) / 1 var(--head); }
.slide.is-in { animation: slide-in .7s var(--ease) both; }
.slide.is-in img { transform: scale(1.08); }
.slide.is-out { animation: slide-out .5s var(--ease) both; }
.feat:hover .slide img { transform: scale(1.12); }
.hero-right .gap-top { margin-top: 2.125rem; }
.party { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.party li {
	position: relative; display: grid; grid-template-columns: 2.125rem 2.125rem 1fr auto; gap: 0.75rem; align-items: center;
	padding: 0.5rem 0.875rem; background: rgba(18, 16, 22, .88); border: 1px solid #2a2730; overflow: hidden;
	transition: border-color .15s, background .15s, transform .25s var(--ease);
}
.party li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.1875rem; background: var(--violet-2); transform: scaleY(0); transition: transform .25s var(--ease); }
.party li:hover { border-color: var(--frame-hi); background: rgba(40, 30, 60, .9); transform: translateX(-0.25rem); }
.party li:hover::before { transform: none; }
.party .lv { font: 700 max(11px, 1rem) var(--head); color: #c9d0d8; text-align: right; }
.party img { width: 2rem; height: 2rem; object-fit: contain; }
.party .nm { font: 700 max(11px, 1.1875rem) var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party .me .nm { color: var(--gold); }
.party .where { font: 500 max(11px, 0.875rem) var(--body); color: var(--muted); text-align: right; line-height: 1.1; }
.party .where b { display: block; color: var(--text); font-weight: 700; }
.party li.join { animation: join .6s var(--ease); }
/* live site: each row is a link to the player's combat record; the link's children sit in the row grid */
.party li > a { display: contents; }
.party li:focus-within { border-color: var(--frame-hi); }
.party img[src^="http"] { object-fit: cover; border: 1px solid #3a3742; }
.party li.is-live::before { transform: none; background: var(--green, #5fd35f); }
.party li.is-live .where b { color: var(--green, #5fd35f); }
.party li.party-empty { display: block; color: var(--muted); font: 500 max(11px, 1rem) var(--body); }
.match-count { margin-left: auto; color: var(--muted); font-style: normal; }
.event-line { white-space: nowrap; }
.wide-btn {
	margin-top: 0.625rem; display: flex; align-items: center; gap: 1.125rem; padding: 0.75rem 1.125rem;
	font: 500 max(11px, 1.1875rem) var(--body); letter-spacing: .05em;
	background: rgba(18, 16, 22, .9); border: 1px solid #3a3742;
	transition: background .2s, border-color .2s;
}
.wide-btn .plus { font: 400 max(11px, 1.875rem)/1.5rem var(--body); transition: transform .3s var(--snap); }
.wide-btn:hover { background: linear-gradient(90deg, var(--violet), rgba(96, 30, 236, .3)); border-color: #fff; }
.wide-btn:hover .plus { transform: rotate(90deg); }
.hero-foot { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tokens { display: flex; align-items: center; gap: 1.375rem; }
.hexes { display: flex; gap: 0.625rem; }
.hexes i {
	width: 2.75rem; height: 2.5rem; display: grid; place-items: center; font: 900 max(11px, 0.6875rem) var(--head); font-style: normal; color: #555c66;
	background: #1a1d23; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	transition: transform .3s var(--snap);
}
.hexes i.on { color: #111; background: linear-gradient(#e9eef3, #8d97a3); animation: hexglow 2.4s ease-in-out infinite; }
.hexes i:hover { transform: scale(1.15) rotate(30deg); }
.systems { display: grid; grid-template-columns: minmax(18.75rem, 26.875rem) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.rows { display: grid; gap: 0.5rem; }
.row {
	position: relative; height: 4rem; display: flex; align-items: center; padding: 0 1rem; text-align: left;
	font: 700 max(11px, 1.125rem) var(--body); letter-spacing: .03em; color: #dfe4ea;
	background: var(--row); border: 1px solid #1b2028; overflow: hidden;
	transition: border-color .2s, color .2s;
	opacity: 0; transform: translateX(-1.25rem);
}
.rows.is-in .row { animation: row-in .5s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms); }
.row::before { /* short tick on the top edge, like the BO7 list */
	content: ""; position: absolute; left: 0; top: 0; width: 2.125rem; height: 2px; background: #444b53; transition: width .35s var(--ease), background .2s;
}
.row img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; opacity: .5; filter: saturate(.7); transform: translateX(10%); transition: opacity .3s, transform .5s var(--ease), filter .3s; pointer-events: none;
	mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
.row span { position: relative; z-index: 1; }
.row small { position: absolute; right: 0.875rem; bottom: 0.375rem; z-index: 1; font: 700 max(11px, 0.6875rem) var(--head); letter-spacing: .12em; color: var(--muted); opacity: 0; transform: translateY(0.25rem); transition: opacity .2s, transform .25s var(--ease); }
.row:hover { border-color: #59626d; color: #fff; }
.row:hover img { opacity: .85; transform: none; filter: none; }
.row:hover::before { width: 4rem; background: #cfd6dd; }
.row.is-active { border-color: #c9d3dd; color: #fff; background: linear-gradient(90deg, rgba(80, 165, 193, .16), var(--row) 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.row.is-active img { opacity: 1; transform: none; filter: none; }
.row.is-active::before { width: 100%; background: var(--tab-line); box-shadow: 0 0 0.5rem var(--tab-line); }
.row.is-active small, .row:hover small { opacity: 1; transform: none; }
.screen-wrap { perspective: 100rem; }
.screen {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
	transform: rotateY(-7deg) rotateX(1.5deg); transform-origin: left center;
	box-shadow: -1.875rem 2.5rem 5rem rgba(0, 0, 0, .7), 0 0 0 1px #2b3038;
	transition: transform .8s var(--ease);
}
.screen-wrap:hover .screen { transform: rotateY(-3deg) rotateX(.5deg); }
.screen-art { position: absolute; inset: 0; }
.screen-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen-art img.is-in { animation: reveal-r .8s var(--ease) both; }
.screen::after { /* screen glass: scanlines + darken right for the text */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 0.1875rem),
		linear-gradient(90deg, transparent 25%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .9) 80%);
}
.screen-text { position: absolute; z-index: 1; right: 4%; top: 7%; bottom: 7%; width: 52%; text-align: right; display: flex; flex-direction: column; }
.screen-text > * { animation: in .55s var(--ease) both; }
.screen-text > *:nth-child(2) { animation-delay: .08s; }
.screen-text > *:nth-child(3) { animation-delay: .16s; }
.screen-text > *:nth-child(4) { animation-delay: .24s; }
.screen-text > *:nth-child(5) { animation-delay: .32s; }
/* the Black Ops III map the screen shows (real menu preview art) */
.st-map { margin: 0 0 0.375rem; font: 700 max(10px, 0.75rem) var(--head); letter-spacing: .18em; color: var(--cyan); text-shadow: 0 1px 4px #000; }
.st-title { position: relative; font: 900 clamp(max(11px, 1.625rem), 3.2vw, 2.875rem) / 1 var(--head); padding-bottom: 0.625rem; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.st-title::before { content: ""; position: absolute; left: -34%; top: 0.375rem; width: 30%; height: 70%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 0.1875rem); mask-image: linear-gradient(90deg, transparent, #000); }
.st-desc { margin: 0.875rem 0 0; font-size: clamp(max(11px, 0.9375rem), 1.25vw, 1.25rem); color: #d0d5db; }
.st-rec { margin: auto 0 0; font-size: clamp(max(11px, 0.875rem), 1.15vw, 1.1875rem); color: var(--orange); }
.st-h { margin: 1.125rem 0 0.25rem; font: 700 clamp(max(11px, 1.0625rem), 1.6vw, 1.5rem) var(--head); }
.st-list { margin: 0; font: 500 clamp(max(11px, 0.875rem), 1.25vw, 1.25rem) / 1.35 var(--body); color: var(--map-blue); }
.screen-desk { height: 2.875rem; margin: -2px 4% 0 -2%; background: linear-gradient(#15181d, #0a0b0e); clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); position: relative; }
.screen-desk i { position: absolute; left: 8%; right: 8%; top: 0.75rem; height: 0.625rem; background: linear-gradient(90deg, transparent, rgba(40, 200, 150, .35), rgba(40, 200, 150, .1), rgba(40, 200, 150, .35), transparent); filter: blur(2px); animation: desk 4s ease-in-out infinite; }
.hq-top { display: grid; grid-template-columns: 2.1fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; align-items: start; }
.card { position: relative; display: block; overflow: hidden; border-radius: 0.25rem; background: #000; transition: box-shadow .3s, transform .35s var(--ease); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .3s; filter: brightness(.75) saturate(.9); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .25s; pointer-events: none; }
.card:hover { transform: translateY(-0.25rem); box-shadow: 0 0 2.125rem rgba(110, 220, 190, .28), 0 1.25rem 3.125rem rgba(0, 0, 0, .6); }
.card:hover::after { box-shadow: inset 0 0 0 2px #a9e5d4; }
.card:hover img { transform: scale(1.06); filter: brightness(.95) saturate(1.1); }
.card-xl { aspect-ratio: 16 / 10; }
.card-tall { aspect-ratio: 4 / 5.3; }
.card-copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 1.375rem; display: flex; flex-direction: column; gap: 0.25rem; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); }
.card-copy.center { top: 0; justify-content: center; align-items: center; text-align: center; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.card-copy small { font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--cyan); margin-top: 0.375rem; }
.card-copy b { font: 900 clamp(max(11px, 1.625rem), 3vw, 3rem) / .95 var(--head); }
.card-copy em { font-style: normal; color: #c9d0d8; font-size: max(11px, 1.0625rem); }
.card-strip {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3.25rem; display: grid; place-items: center;
	font: 500 max(11px, 1.3125rem) var(--body); letter-spacing: .06em;
	background: linear-gradient(rgba(140, 160, 155, .9), rgba(80, 96, 92, .95)); color: #f1f4f3;
	transform: translateY(100%); transition: transform .3s var(--ease);
}
.card:hover .card-strip, .card.is-hot .card-strip { transform: none; }
.card.is-hot { box-shadow: 0 0 1.875rem rgba(110, 220, 190, .2); }
.card.is-hot::after { box-shadow: inset 0 0 0 2px rgba(169, 229, 212, .7); }
.hot-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; padding: 0; }
.hot { aspect-ratio: 16 / 8; }
.hot .card-copy { top: 0; justify-content: center; align-items: center; text-align: center; background: rgba(0, 0, 0, .35); }
.hot .card-copy b { font-size: clamp(max(11px, 1.25rem), 2vw, 1.875rem); color: rgba(255, 255, 255, .85); }
.hot .card-copy em { font-family: var(--head); font-weight: 700; font-size: max(11px, 0.875rem); letter-spacing: .1em; color: #8fd3c0; }
.hot .tag { position: absolute; z-index: 2; left: 0.875rem; top: 0.625rem; font: 900 max(11px, 0.9375rem) var(--head); color: rgba(255, 255, 255, .55); }
@media (prefers-reduced-motion: reduce) {
	.in, .reveal, .row, .tile, .screen-icons img { opacity: 1 !important; transform: none !important; }
	.hero-title .ln > span { transform: none; }
}
@media (max-width: 1240px) {
	.hq-top { gap: 1.5rem; }
	.hot-row { gap: 1.5rem; }
}
@media (max-width: 1080px) {
	.hero { grid-template-columns: minmax(0, 1fr); padding-top: 7.5rem; }
	.hero-left, .hero-right { min-width: 0; }
	.hero-right { margin-top: 0; }
	.systems { grid-template-columns: 1fr; }
	.screen { transform: none; }
	.hq-top { grid-template-columns: 1fr 1fr; }
	.hq-top > :first-child { grid-column: 1 / -1; }
	.hot-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.match-cta { flex-direction: column; }
	.match-side { width: auto; height: 3.5rem; }
	.hero-foot { flex-direction: column; align-items: flex-start; }
	.screen-text { width: 70%; }
	.st-desc, .st-rec { display: none; }
	.hq-top { grid-template-columns: 1fr; }
	.hot-row { grid-template-columns: 1fr; }
	.card-tall { aspect-ratio: 16 / 11; }
	.party li { grid-template-columns: 1.75rem 1.875rem 1fr auto; gap: 0.5rem; }
}
.kicker .pill-new + span { vertical-align: 2px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.875rem; margin: 1.875rem 0 0; max-width: 40rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dd { margin: 0; font: 900 max(11px, 1.875rem) / 1 var(--head); font-variant-numeric: tabular-nums; }
.hero-stats dt { font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .14em; color: var(--muted); margin-top: 0.25rem; }
.feat { position: relative; }
.feat-timer { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.3125rem; height: 2px; color: var(--cyan); background: var(--ticks); transform-origin: left; transform: scaleX(0); }
.feat-timer.run { animation: timer 6s linear forwards; }
.label-row small { font: 700 max(11px, 0.6875rem) var(--head); letter-spacing: .14em; margin-left: 0.375rem; }
.screen-icons { position: absolute; z-index: 1; left: 3.5%; bottom: 7%; width: 40%; display: flex; flex-wrap: wrap; gap: 0.375rem; align-content: flex-end; }
.screen-icons img { width: clamp(1.875rem, 3.6vw, 3.375rem); height: clamp(1.875rem, 3.6vw, 3.375rem); object-fit: contain; padding: 0.1875rem; background: rgba(5, 6, 8, .72); border: 1px solid rgba(255, 255, 255, .14); animation: pop .4s var(--snap) both; animation-delay: calc(var(--i) * 28ms + .2s); }
.systems .sys-list, .systems .screen-wrap { min-width: 0; }
.load-tabs { padding-left: 0; flex-wrap: wrap; gap: 0.25rem 1.875rem; margin-bottom: 1.25rem; }
.load-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 23.75rem); gap: 2.5rem; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
.tile { position: relative; aspect-ratio: 1 / 1.08; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.625rem 0.375rem 0.5rem; overflow: hidden; background: rgba(14, 16, 21, .86); border: 1px solid #23272f; transition: border-color .15s, background .2s, transform .25s var(--snap); animation: pop .35s var(--snap) both; animation-delay: calc(var(--i) * 18ms); }
.tile::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5rem; height: 2px; background: var(--rc, #444b53); }
.tile img { width: 66%; height: 60%; object-fit: contain; transition: transform .3s var(--snap), filter .2s; filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, .6)); }
.tile.wide img { width: 94%; }
.tile span { max-width: 100%; text-overflow: ellipsis; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .04em; white-space: nowrap; overflow: hidden; color: #c9d0d8; }
.tile:hover { border-color: #8d97a3; transform: translateY(-0.1875rem); }
.tile:hover img { transform: scale(1.12); }
.tile.is-active { border-color: #fff; background: radial-gradient(90% 80% at 50% 30%, color-mix(in srgb, var(--rc, #601eec) 30%, transparent), rgba(14, 16, 21, .9)); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--rc, #601eec) 35%, transparent); }
.tile.is-active span { color: #fff; }
.tile.is-soon img { filter: grayscale(1) brightness(.5); }
.tile .soon { position: absolute; right: 0.3125rem; top: 0.3125rem; font: 700 max(9px, 0.5625rem) var(--head); letter-spacing: .1em; color: var(--amber); }
.detail { position: sticky; top: 6.25rem; padding: 1.125rem; }
.detail-art { height: 11.875rem; display: grid; place-items: center; margin-bottom: 0.875rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc, #601eec) 34%, transparent), transparent), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 0.1875rem); }
.detail-art img { max-width: 80%; max-height: 10rem; object-fit: contain; filter: drop-shadow(0 0.625rem 1.125rem #000); }
.detail-art img.is-in { animation: pop .4s var(--snap) both; }
.detail-kind { margin: 0; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--rc, var(--cyan)); }
.detail-kind::before { content: "/ "; opacity: .6; }
.detail-name { font: 900 clamp(max(11px, 1.625rem), 2.6vw, 2.25rem) / 1 var(--head); margin-top: 0.25rem; overflow-wrap: anywhere; }
.detail-desc { margin: 0 0 0.875rem; color: #d0d5db; min-height: 4.75rem; }
.detail-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-meta span { padding: 2px 0.625rem; font: 500 max(11px, 0.9375rem) var(--body); letter-spacing: .04em; background: rgba(65, 76, 97, .5); color: #b9c8e4; }
.notes-tabs { padding-left: 0; flex-wrap: wrap; gap: 0.25rem 1.875rem; margin-bottom: 1.25rem; }
.notes-grid { display: grid; grid-template-columns: minmax(16.25rem, 23.75rem) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.note-list { display: grid; gap: 0.25rem; max-height: 40rem; overflow-y: auto; padding-right: 0.5rem; scrollbar-width: thin; scrollbar-color: #5a626d transparent; }
.note-item { position: relative; padding: 0.625rem 0.875rem 0.625rem 1.125rem; text-align: left; background: rgba(14, 16, 21, .88); border: 1px solid #23272f; transition: border-color .15s, background .15s; }
.note-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem; background: #2f353e; transition: background .2s; }
.note-item b { display: block; font: 700 max(11px, 1rem) / 1.15 var(--head); letter-spacing: .02em; }
.note-item small { font: 500 max(11px, 0.875rem) var(--body); color: var(--muted); }
.note-item em { float: right; margin-left: 0.5rem; padding: 0 0.4375rem 1px; font: 700 max(11px, 0.6875rem) var(--head); font-style: normal; letter-spacing: .1em; color: #fff; background: var(--violet); }
.note-item:hover { border-color: #59626d; }
.note-item.is-active { border-color: #c9d3dd; background: linear-gradient(90deg, rgba(96, 30, 236, .25), rgba(14, 16, 21, .9) 65%); }
.note-item.is-active::before { background: var(--violet-2); box-shadow: 0 0 0.625rem var(--violet-2); }
.note-pane { padding: 1.375rem 1.625rem; min-height: 26.25rem; max-height: 40rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a626d transparent; }
.note-pane > * { animation: in .4s var(--ease) both; }
.note-pane h3 { font: 900 clamp(max(11px, 1.5rem), 2.6vw, 2.25rem) / 1 var(--head); }
.note-pane .np-sub { margin: 0.375rem 0 0; color: var(--muted); }
.note-pane h4 { margin: 1.25rem 0 0.5rem; font: 700 max(11px, 0.9375rem) var(--head); letter-spacing: .14em; color: var(--cyan); }
.note-pane ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.note-pane li { position: relative; padding: 0.3125rem 0 0.3125rem 1.875rem; color: #d0d5db; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.note-pane li::before, .legend span::before { content: ""; position: absolute; left: 0.25rem; top: 0.8125rem; width: 0.5rem; height: 0.5rem; background: #6b7480; }
.note-pane li.k-ok::before, .legend .k-ok::before { background: var(--ok); clip-path: polygon(0 55%, 35% 100%, 100% 20%, 82% 5%, 35% 62%, 16% 38%); width: 0.875rem; height: 0.75rem; margin: -2px 0 0 -2px; }
.note-pane li.k-wip::before, .legend .k-wip::before { background: var(--amber); border-radius: 50%; }
.note-pane li.k-bad::before, .legend .k-bad::before { background: var(--bad); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); width: 0.6875rem; height: 0.6875rem; margin-top: -1px; }
.note-pane li.k-warn::before, .legend .k-warn::before { background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 0.75rem; height: 0.6875rem; margin: -2px 0 0 -1px; }
.note-pane li.k-new::before, .legend .k-new::before { background: var(--cyan); transform: rotate(45deg); }
.note-pane li.k-fix::before, .legend .k-fix::before { background: var(--violet-2); }
.note-pane li.k-bad { color: #9aa3ad; }
.note-pane li.k-sub { font-size: max(11px, 1rem); color: var(--muted); border-bottom: 0; margin-top: -0.25rem; }
.note-pane li.k-sub::before { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; margin-top: 1rem; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .12em; color: var(--muted); }
.legend span { position: relative; padding-left: 1.375rem; }
.legend span::before { top: 0.25rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.steps li { display: grid; grid-template-columns: 5.25rem 1fr; gap: 1.125rem; align-items: center; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--frame); position: relative; transition: border-color .2s, transform .3s var(--ease); }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 2.125rem; height: 2px; background: var(--tab-line); transition: width .4s var(--ease); }
.steps li:hover { border-color: var(--frame-hi); transform: translateX(0.375rem); }
.steps li:hover::before { width: 100%; }
.steps b { font: 900 max(11px, 3.375rem) / 1 var(--head); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); }
.steps h3 { font: 900 max(11px, 1.5rem) / 1 var(--head); }
.steps p { margin: 0.375rem 0 0; color: #c3c9d0; }
.req { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0.875rem 0 0; font-size: max(11px, 1rem); color: var(--muted); }
.req svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--amber); margin-top: 0.1875rem; }
.hot .tag { color: var(--cyan); font-size: max(11px, 0.75rem); letter-spacing: .12em; }
@media (prefers-reduced-motion: reduce) {
	.feat-timer { display: none; }
}
@media (max-width: 1080px) {
	.note-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.note-pane { max-height: none; }
	.detail { position: static; order: -1; display: grid; grid-template-columns: 8.125rem 1fr; gap: 0 1.125rem; }
	.detail-art { grid-row: 1 / 6; height: 8.125rem; margin: 0; }
	.detail-art img { max-height: 6.875rem; }
	.detail-desc { min-height: 0; }
}
@media (max-width: 640px) {
	.hero-stats { gap: 0.625rem 1.375rem; }
	.hero-stats dd { font-size: max(11px, 1.5rem); }
	.tiles { grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); }
	.detail { grid-template-columns: 5.625rem 1fr; padding: 0.75rem; }
	.detail-art { height: 5.625rem; }
	.detail-art img { max-height: 4.75rem; }
	.steps li { grid-template-columns: 3.5rem 1fr; gap: 0.75rem; padding: 0.875rem; }
	.steps b { font-size: max(11px, 2.375rem); }
	.screen-icons { display: none; }
}
.lite-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; }
.lite-show { display: flex; flex-direction: column; padding: 1.125rem 1.25rem; overflow: hidden; background: radial-gradient(60% 60% at 50% 55%, rgba(80, 165, 193, .12), transparent 70%), rgba(8, 9, 12, .6); transition: border-color .2s; }
.lite-show:hover { border-color: var(--frame-hi); }
.lite-show-top { display: flex; align-items: center; gap: 0.75rem; }
.lite-name { font: 900 clamp(max(11px, 1.375rem), 2.2vw, 2.125rem) / 1 var(--head); }
.lite-stage { flex: 1; min-height: 13.75rem; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; }
.lite-img { max-height: 16.25rem; width: min(100%, 42.5rem); object-fit: contain; filter: drop-shadow(0 1.375rem 1.625rem rgba(0, 0, 0, .75)); transition: transform .5s var(--ease); }
.lite-img.is-in { animation: gun-in .55s var(--ease) both; }
.lite-show:hover .lite-img { transform: scale(1.04); }
.lite-show-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.lite-show-foot small { white-space: nowrap; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .14em; color: var(--muted); transition: color .2s; }
.lite-show:hover .lite-show-foot small { color: var(--cyan); }
.lite-pager { display: flex; gap: 0.3125rem; }
.lite-pager i { width: 1.125rem; height: 0.1875rem; background: rgba(255, 255, 255, .18); transition: background .3s, width .3s var(--ease); }
.lite-pager i.is-on { width: 2.125rem; background: var(--tab-line); box-shadow: 0 0 0.5rem var(--tab-line); }
.lite-side { display: flex; flex-direction: column; gap: 1.125rem; }
.lite-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin: 0; }
.lite-stats div { display: flex; flex-direction: column; padding: 0.75rem 1rem; background: var(--panel); border: 1px solid var(--frame); }
.lite-stats dd { margin: 0; font: 900 max(11px, 1.875rem) / 1 var(--head); font-variant-numeric: tabular-nums; }
.lite-stats dt { margin-top: 0.25rem; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.lite-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.lite-class { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; font: 500 max(11px, 1rem) var(--body); letter-spacing: .03em; color: #dfe4ea; background: var(--row); border: 1px solid #1b2028; position: relative; transition: border-color .2s, color .2s, background .2s; }
.lite-class::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5rem; height: 2px; background: #444b53; transition: width .35s var(--ease), background .2s; }
.lite-class b { font: 700 max(11px, 0.9375rem) var(--head); color: var(--muted); }
.lite-class:hover { color: #fff; border-color: #59626d; background: linear-gradient(90deg, rgba(80, 165, 193, .14), var(--row) 70%); }
.lite-class:hover::before { width: 100%; background: var(--tab-line); }
.lite-btn { margin-top: auto; }
.career-lite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 70% at 25% 50%, rgba(70, 90, 160, .2), transparent 70%); }
.lite-record { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; padding: 1.375rem 1.75rem; background: rgba(8, 9, 12, .6); transition: border-color .2s; }
.lite-record:hover { border-color: var(--frame-hi); }
.lite-emblem { width: 7.5rem; height: 7.5rem; object-fit: contain; filter: drop-shadow(0 0 1.625rem rgba(96, 30, 236, .6)); animation: float 5s ease-in-out infinite; }
.lite-who { display: flex; flex-direction: column; min-width: 0; }
.lite-who .label { margin-bottom: 0.25rem; }
.lite-player { font: 900 clamp(max(11px, 2rem), 3.6vw, 3.375rem) / 1 var(--head); }
.lite-who .career-sub { margin: 0.5rem 0 0.75rem; }
.lite-who .xp { display: block; }
.lite-rec-stats { display: flex; gap: 0.625rem; margin: 0; }
.lite-rec-stats div { min-width: 9.375rem; padding: 0.75rem 1rem; background: var(--panel); border: 1px solid var(--frame); }
.lite-rec-stats dt { font: 500 max(11px, 0.875rem) var(--body); letter-spacing: .08em; color: var(--muted); }
.lite-rec-stats dd { margin: 2px 0 0; font: 700 max(11px, 1.75rem) var(--head); font-variant-numeric: tabular-nums; }
.lite-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.625rem; max-width: 47.5rem; margin: 1.375rem 0 0; }
.career-lite .big-btns { margin-top: 3.75rem; }
@media (max-width: 1080px) {
	.lite-grid { grid-template-columns: minmax(0, 1fr); }
	.lite-record { grid-template-columns: 6.25rem minmax(0, 1fr); }
	.lite-emblem { width: 6.25rem; height: 6.25rem; }
	.lite-rec-stats { grid-column: 1 / -1; }
	.lite-rec-stats div { flex: 1; min-width: 0; }
}
@media (max-width: 640px) {
	.lite-stage { min-height: 10rem; }
	.lite-pager i { width: 0.625rem; }
	.lite-pager i.is-on { width: 1.25rem; }
	.lite-classes { grid-template-columns: 1fr; }
	.lite-record { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.125rem; }
	.lite-emblem { width: 5rem; height: 5rem; }
	.lite-btns { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}
/* last in the file so they win over the base rules above */
@media (max-width: 1080px) {
	/* shared with arsenal.css in the concept's one stylesheet: loadout + patch notes stack, the note list scrolls sideways */
	.load-grid, .notes-grid { grid-template-columns: minmax(0, 1fr); }
	.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; }
}
@media (max-width: 640px) {
	.tokens { flex-wrap: wrap; gap: 0.625rem 1rem; }
	.event-line { white-space: normal; }
	.note-pane { max-height: 70vh; }
}