/*
Theme Name: Command Surface
Theme URI: https://jamilblog.top/
Author: Jamil & Codex
Author URI: https://jamilblog.top/
Description: A clean command-screen WordPress theme with compressed typography, armor-like panels, bright action states, blue system glow, and console-style interactions.
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ow2-command
Tags: blog, custom-logo, custom-menu, featured-images, threaded-comments, wide-blocks, block-styles
*/

:root {
	--ow2-ink: #12151d;
	--ow2-ink-2: #1d2430;
	--ow2-ink-3: #2d3542;
	--ow2-white: #f4f2eb;
	--ow2-white-2: #ffffff;
	--ow2-warm: #e8e1d2;
	--ow2-muted: #9aa7b7;
	--ow2-muted-dark: #5f6b79;
	--ow2-orange: #f06414;
	--ow2-orange-2: #ff9d2e;
	--ow2-blue: #18b9ff;
	--ow2-blue-2: #72d8ff;
	--ow2-yellow: #ffc83d;
	--ow2-red: #ef4146;
	--ow2-green: #65d17a;
	--ow2-line: rgba(17, 25, 37, 0.14);
	--ow2-line-light: rgba(255, 255, 255, 0.18);
	--ow2-shadow: 0 22px 60px rgba(7, 10, 16, 0.26);
	--ow2-shell: min(1220px, calc(100vw - 36px));
	--ow2-radius: 6px;
	--ow2-font: "Liberation Sans Narrow", "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", ui-sans-serif, system-ui, sans-serif;
	--ow2-mono: "Liberation Mono", "SFMono-Regular", Consolas, monospace;
	--ow2-vh: 1vh;
}

@font-face {
	font-family: "Liberation Sans Narrow";
	src: url("assets/fonts/LiberationSansNarrow-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Liberation Sans Narrow";
	src: url("assets/fonts/LiberationSansNarrow-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight: 900;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: auto;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		linear-gradient(115deg, transparent 0 38%, rgba(24, 185, 255, 0.11) 38.2% 38.8%, transparent 39%),
		linear-gradient(245deg, transparent 0 54%, rgba(240, 100, 20, 0.12) 54.2% 54.8%, transparent 55%),
		radial-gradient(circle at 80% 4%, rgba(255, 200, 61, 0.13), transparent 24%),
		linear-gradient(180deg, #edf0f4 0%, #d9dee6 42%, #bfc8d2 100%);
	color: var(--ow2-ink);
	font-family: var(--ow2-font);
	font-size: 16px;
	line-height: 1.68;
	letter-spacing: 0;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(18, 21, 29, 0.055) 1px, transparent 1px),
		linear-gradient(0deg, rgba(18, 21, 29, 0.045) 1px, transparent 1px),
		repeating-linear-gradient(115deg, transparent 0 118px, rgba(255, 255, 255, 0.32) 118px 120px, transparent 120px 178px);
	background-size: 74px 74px, 74px 74px, auto;
	transform: translate3d(var(--ow2-bg-x, 0), var(--ow2-bg-y, 0), 0);
	pointer-events: none;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(18, 21, 29, 0.82), rgba(18, 21, 29, 0.35) 22%, transparent 42%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.14));
	clip-path: polygon(0 0, 22% 0, 15% 100%, 0 100%);
	opacity: 0.76;
	pointer-events: none;
}

body.ow2-nav-open {
	overflow: hidden;
}

a {
	color: var(--ow2-orange);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

a:hover,
a:focus {
	color: #a73d08;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ow2-blue);
	outline-offset: 3px;
}

button,
input,
select,
textarea {
	font: inherit;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

code,
kbd,
pre,
samp {
	font-family: var(--ow2-mono);
}

pre {
	max-width: 100%;
	overflow-x: auto;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ow2-radius);
	background: var(--ow2-ink);
	color: var(--ow2-white);
}

blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 5px solid var(--ow2-orange);
	color: var(--ow2-ink-3);
	font-weight: 700;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 12px 14px;
	border: 1px solid rgba(18, 21, 29, 0.14);
}

th {
	background: rgba(24, 185, 255, 0.10);
	text-align: left;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	white-space: nowrap;
}

.skip-link:focus {
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 10px 14px;
	clip: auto;
	border-radius: var(--ow2-radius);
	background: var(--ow2-orange);
	color: var(--ow2-white);
	font-weight: 900;
	text-decoration: none;
}

.ow2-shell {
	width: var(--ow2-shell);
	margin: 0 auto;
}

.ow2-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 4px;
	background: rgba(18, 21, 29, 0.18);
}

.admin-bar .ow2-progress {
	top: 32px;
}

.ow2-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--ow2-orange), var(--ow2-yellow), var(--ow2-blue));
	box-shadow: 0 0 20px rgba(240, 100, 20, 0.55);
}

.ow2-topbar {
	position: sticky;
	top: 0;
	z-index: 80;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	background:
		linear-gradient(90deg, rgba(240, 100, 20, 0.22), transparent 18%, rgba(24, 185, 255, 0.12) 76%, transparent),
		rgba(17, 21, 30, 0.92);
	color: var(--ow2-white);
	backdrop-filter: blur(18px);
	box-shadow: 0 16px 38px rgba(7, 10, 16, 0.20);
}

.admin-bar .ow2-topbar {
	top: 32px;
}

.ow2-topbar::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.10) 30.2% 30.7%, transparent 31%),
		repeating-linear-gradient(90deg, transparent 0 86px, rgba(255, 255, 255, 0.06) 86px 87px, transparent 87px 126px);
	pointer-events: none;
}

.ow2-topbar__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	min-height: 74px;
}

.ow2-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--ow2-white);
	text-decoration: none;
}

.ow2-brand:hover,
.ow2-brand:focus {
	color: var(--ow2-white);
}

.ow2-brand__sigil {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border: 2px solid rgba(255, 255, 255, 0.78);
	border-radius: 50%;
	background:
		linear-gradient(135deg, rgba(240, 100, 20, 0.96), rgba(255, 157, 46, 0.94) 48%, transparent 49%),
		rgba(255, 255, 255, 0.10);
	box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.20), 0 0 0 3px rgba(24, 185, 255, 0.18);
}

.ow2-brand__sigil::before,
.ow2-brand__sigil::after,
.ow2-brand__sigil span {
	content: "";
	position: absolute;
	background: var(--ow2-white);
}

.ow2-brand__sigil::before {
	width: 26px;
	height: 5px;
	top: 12px;
	border-radius: 4px;
}

.ow2-brand__sigil::after {
	width: 5px;
	height: 22px;
	bottom: 7px;
	border-radius: 4px;
}

.ow2-brand__sigil span {
	width: 18px;
	height: 5px;
	bottom: 11px;
	border-radius: 4px;
	transform: rotate(45deg);
	box-shadow: 11px -11px 0 var(--ow2-white);
}

.ow2-brand__copy {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ow2-brand__name {
	max-width: 34vw;
	overflow: hidden;
	color: var(--ow2-white);
	font-size: 1.06rem;
	font-weight: 950;
	line-height: 1;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.ow2-brand__tag {
	max-width: 34vw;
	overflow: hidden;
	color: rgba(244, 242, 235, 0.70);
	font-family: var(--ow2-mono);
	font-size: 0.68rem;
	line-height: 1.1;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.ow2-nav {
	justify-self: center;
}

.ow2-menu,
.ow2-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ow2-menu a,
.ow2-nav .page_item a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	color: rgba(244, 242, 235, 0.76);
	font-size: 0.86rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
}

.ow2-menu a::before,
.ow2-nav .page_item a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.06);
	transition: background 160ms ease, transform 160ms ease;
}

.ow2-menu a:hover,
.ow2-menu a:focus,
.ow2-menu .current-menu-item > a,
.ow2-nav .current_page_item > a {
	color: var(--ow2-white);
}

.ow2-menu a:hover::before,
.ow2-menu a:focus::before,
.ow2-menu .current-menu-item > a::before,
.ow2-nav .current_page_item > a::before {
	background: linear-gradient(135deg, var(--ow2-orange), var(--ow2-orange-2));
}

.ow2-quickbar {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

.ow2-quickbar__button,
.ow2-nav-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ow2-radius);
	background: rgba(255, 255, 255, 0.07);
	color: var(--ow2-white);
	font-size: 0.8rem;
	font-weight: 950;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
}

.ow2-quickbar__button span:first-child {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--ow2-white);
	color: var(--ow2-ink);
	font-family: var(--ow2-mono);
	font-size: 0.76rem;
	font-weight: 950;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}

.ow2-quickbar__button:hover,
.ow2-quickbar__button:focus,
.ow2-quickbar__button[aria-pressed="true"] {
	border-color: rgba(240, 100, 20, 0.72);
	background: rgba(240, 100, 20, 0.26);
	color: var(--ow2-white);
}

.ow2-nav-toggle {
	display: none;
	border: 0;
	background: var(--ow2-orange);
}

.ow2-nav-toggle__bars,
.ow2-nav-toggle__bars::before,
.ow2-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 99px;
	background: currentColor;
	content: "";
	transition: transform 160ms ease, opacity 160ms ease;
}

.ow2-nav-toggle__bars::before {
	transform: translateY(-6px);
}

.ow2-nav-toggle__bars::after {
	transform: translateY(4px);
}

.ow2-nav-toggle.is-active .ow2-nav-toggle__bars {
	background: transparent;
}

.ow2-nav-toggle.is-active .ow2-nav-toggle__bars::before {
	transform: translateY(0) rotate(45deg);
}

.ow2-nav-toggle.is-active .ow2-nav-toggle__bars::after {
	transform: translateY(-2px) rotate(-45deg);
}

.ow2-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(44px, 8vw, 92px) 0 clamp(24px, 5vw, 58px);
	background:
		linear-gradient(135deg, rgba(18, 21, 29, 0.92), rgba(18, 21, 29, 0.70) 42%, transparent 42%),
		linear-gradient(115deg, transparent 0 60%, rgba(24, 185, 255, 0.26) 60.2% 60.8%, transparent 61%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
	color: var(--ow2-white);
}

.ow2-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 255, 255, 0.045) 72px 73px),
		repeating-linear-gradient(0deg, transparent 0 72px, rgba(255, 255, 255, 0.035) 72px 73px);
	mask-image: linear-gradient(90deg, #000, transparent 72%);
	pointer-events: none;
}

.ow2-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.82fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	min-height: clamp(500px, 68vh, 720px);
}

.ow2-hero__copy {
	max-width: 760px;
}

.ow2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--ow2-blue-2);
	font-family: var(--ow2-mono);
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: uppercase;
}

.ow2-eyebrow::before {
	content: "";
	width: 36px;
	height: 10px;
	clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	background: linear-gradient(90deg, var(--ow2-orange) 0 52%, var(--ow2-blue) 52%);
	box-shadow: 0 0 18px rgba(24, 185, 255, 0.38);
}

.ow2-hero h1,
.ow2-page-head h1,
.ow2-article h1,
.ow2-empty h1,
.ow2-error h1 {
	margin: 0;
	color: inherit;
	font-size: clamp(2.7rem, 8vw, 7.1rem);
	font-weight: 950;
	line-height: 0.9;
	text-transform: uppercase;
	text-wrap: balance;
}

.ow2-hero__copy > p:not(.ow2-eyebrow) {
	max-width: 58ch;
	margin: 18px 0 0;
	color: rgba(244, 242, 235, 0.78);
	font-size: clamp(1rem, 1.7vw, 1.22rem);
}

.ow2-hero__actions,
.ow2-article__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 24px;
}

.ow2-button,
.page-numbers,
.post-page-numbers,
.comment-form input[type="submit"],
.search-form input[type="submit"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--ow2-radius);
	background: var(--ow2-white-2);
	color: var(--ow2-ink);
	font-weight: 950;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: inset 0 -4px 0 rgba(18, 21, 29, 0.16), 0 10px 24px rgba(7, 10, 16, 0.13);
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
	cursor: pointer;
	overflow: hidden;
	touch-action: manipulation;
}

.ow2-button:hover,
.ow2-button:focus,
.page-numbers:hover,
.page-numbers:focus,
.page-numbers.current,
.post-page-numbers:hover,
.post-page-numbers:focus,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus,
.search-form input[type="submit"]:hover,
.search-form input[type="submit"]:focus {
	background: #dfe4eb;
	color: var(--ow2-ink);
	transform: translateY(-1px);
}

.ow2-button--primary,
.comment-form input[type="submit"],
.search-form input[type="submit"] {
	background: linear-gradient(135deg, var(--ow2-orange), var(--ow2-orange-2));
	color: var(--ow2-white);
	box-shadow: inset 0 -5px 0 rgba(95, 31, 4, 0.34), 0 12px 28px rgba(240, 100, 20, 0.26);
}

.ow2-button--primary:hover,
.ow2-button--primary:focus,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus,
.search-form input[type="submit"]:hover,
.search-form input[type="submit"]:focus {
	background: linear-gradient(135deg, #ff741c, #ffab39);
	color: var(--ow2-white);
}

.ow2-button--compact {
	min-height: 40px;
	padding: 10px 14px;
	font-size: 0.82rem;
}

.ow2-ripple {
	position: absolute;
	z-index: 0;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.58), rgba(24, 185, 255, 0.24) 44%, transparent 68%);
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.14);
	animation: ow2-ripple 460ms ease-out forwards;
}

.ow2-button > :not(.ow2-ripple),
.ow2-quickbar__button > :not(.ow2-ripple),
.ow2-nav-toggle > :not(.ow2-ripple),
.page-numbers > :not(.ow2-ripple) {
	position: relative;
	z-index: 1;
}

.ow2-hero-card {
	position: relative;
	min-height: clamp(420px, 52vw, 620px);
	border: 2px solid rgba(255, 255, 255, 0.84);
	border-radius: var(--ow2-radius);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54) 36%, transparent 36%),
		linear-gradient(315deg, rgba(24, 185, 255, 0.38), transparent 45%),
		linear-gradient(180deg, #293341, #111720);
	box-shadow: var(--ow2-shadow);
	clip-path: polygon(32px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%, 0 32px);
	isolation: isolate;
	overflow: hidden;
	transform: perspective(1100px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
	transition: transform 180ms ease;
}

.ow2-hero-card::before {
	content: "";
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(255, 255, 255, 0.26);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 52px 52px;
	opacity: 0.72;
}

.ow2-hero-card::after {
	content: "READY";
	position: absolute;
	right: 22px;
	bottom: 20px;
	padding: 7px 12px;
	border-radius: 4px;
	background: var(--ow2-orange);
	color: var(--ow2-white);
	font-family: var(--ow2-mono);
	font-size: 0.72rem;
	font-weight: 950;
	letter-spacing: 0;
}

.ow2-hero-card__hud {
	position: absolute;
	top: 18px;
	right: 18px;
	left: 18px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	color: var(--ow2-white);
	font-family: var(--ow2-mono);
	font-size: 0.72rem;
	font-weight: 950;
	text-transform: uppercase;
}

.ow2-hero-card__hud span {
	padding: 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	background: rgba(17, 21, 30, 0.74);
}

.ow2-hero-card__portrait {
	position: absolute;
	inset: 90px 12% 120px;
	z-index: 1;
	display: grid;
	place-items: center;
}

.ow2-hero-card__portrait::before {
	content: "";
	position: absolute;
	width: min(92%, 360px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(24, 185, 255, 0.24), transparent 62%),
		conic-gradient(from 220deg, var(--ow2-orange) 0 14%, transparent 14% 34%, var(--ow2-blue) 34% 48%, transparent 48% 72%, var(--ow2-yellow) 72% 82%, transparent 82%);
	filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.28));
	animation: ow2-ring 12s linear infinite;
}

.ow2-hero-card__portrait span:nth-child(1) {
	position: absolute;
	width: min(70%, 300px);
	aspect-ratio: 0.86;
	border-radius: 36% 36% 12% 12%;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0 32%, transparent 32%),
		linear-gradient(180deg, #e8edf4 0 18%, #657386 18% 52%, #273140 52% 100%);
	clip-path: polygon(20% 0, 80% 0, 100% 30%, 86% 100%, 14% 100%, 0 30%);
	box-shadow: inset 0 -18px 0 rgba(0, 0, 0, 0.16), 0 20px 54px rgba(0, 0, 0, 0.34);
}

.ow2-hero-card__portrait span:nth-child(2) {
	position: absolute;
	top: 18%;
	width: min(46%, 190px);
	height: 18%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ow2-blue), var(--ow2-blue-2));
	box-shadow: 0 0 26px rgba(24, 185, 255, 0.78);
}

.ow2-hero-card__portrait span:nth-child(3) {
	position: absolute;
	bottom: 16%;
	width: min(74%, 310px);
	height: 18px;
	background:
		linear-gradient(90deg, var(--ow2-orange) 0 32%, transparent 32% 38%, var(--ow2-blue) 38% 66%, transparent 66% 72%, var(--ow2-yellow) 72%);
	clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.ow2-hero-card__stats {
	position: absolute;
	right: 22px;
	bottom: 56px;
	left: 22px;
	z-index: 2;
	display: grid;
	gap: 9px;
}

.ow2-hero-card__stats span {
	height: 9px;
	border-radius: 99px;
	background:
		linear-gradient(90deg, var(--ow2-blue), var(--ow2-green) var(--value), rgba(255, 255, 255, 0.16) var(--value)),
		repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 0, 0, 0.20) 18px 20px);
}

.ow2-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
	padding: clamp(34px, 5vw, 64px) 0 80px;
}

.ow2-layout--single {
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.ow2-feed {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.ow2-section-title {
	display: grid;
	gap: 4px;
	padding: 6px 0 2px;
}

.ow2-section-title h2 {
	margin: 0;
	font-size: clamp(1.7rem, 3.2vw, 3rem);
	font-weight: 950;
	line-height: 0.95;
	text-transform: uppercase;
}

.ow2-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(210px, 32%) minmax(0, 1fr);
	min-height: 250px;
	border-radius: var(--ow2-radius);
	background: rgba(255, 255, 255, 0.86);
	box-shadow: var(--ow2-shadow);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
	isolation: isolate;
	overflow: hidden;
	transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(var(--lift, 0));
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.ow2-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border: 1px solid rgba(18, 21, 29, 0.12);
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

.ow2-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 10px;
	height: 100%;
	background: var(--accent, var(--ow2-orange));
}

.ow2-card:hover,
.ow2-card:focus-within {
	--lift: -3px;
	box-shadow: 0 26px 70px rgba(7, 10, 16, 0.32);
}

.ow2-card--support {
	--accent: var(--ow2-blue);
}

.ow2-card--damage {
	--accent: var(--ow2-orange);
}

.ow2-card--tank {
	--accent: var(--ow2-yellow);
}

.ow2-card--strike {
	--accent: var(--ow2-green);
}

.ow2-card__media {
	position: relative;
	display: block;
	min-height: 100%;
	background:
		linear-gradient(135deg, var(--accent, var(--ow2-orange)), transparent 48%),
		linear-gradient(315deg, rgba(24, 185, 255, 0.42), transparent 50%),
		#273140;
	overflow: hidden;
}

.ow2-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 250px;
	object-fit: cover;
	filter: saturate(1.06) contrast(1.04);
	transform: scale(1.01);
	transition: transform 220ms ease, filter 220ms ease;
}

.ow2-card:hover .ow2-card__media img,
.ow2-card:focus-within .ow2-card__media img {
	filter: saturate(1.14) contrast(1.06);
	transform: scale(1.04);
}

.ow2-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(18, 21, 29, 0.20), transparent 42%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 7px);
	pointer-events: none;
}

.ow2-card__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.ow2-card__fallback::before {
	content: "";
	width: min(62%, 170px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		conic-gradient(from 225deg, var(--accent, var(--ow2-orange)) 0 18%, transparent 18% 36%, var(--ow2-blue) 36% 48%, transparent 48% 74%, var(--ow2-white) 74% 84%, transparent 84%);
	opacity: 0.72;
}

.ow2-card__fallback span {
	width: min(46%, 130px);
	height: 18px;
	background: var(--ow2-white);
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.34);
}

.ow2-card__body {
	position: relative;
	display: grid;
	align-content: start;
	gap: 12px;
	padding: clamp(18px, 3vw, 32px);
	background:
		linear-gradient(120deg, transparent 0 74%, rgba(18, 21, 29, 0.06) 74.2% 75.2%, transparent 75.4%),
		rgba(255, 255, 255, 0.90);
}

.ow2-card__topline,
.ow2-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	color: var(--ow2-muted-dark);
	font-family: var(--ow2-mono);
	font-size: 0.74rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ow2-card__topline {
	justify-content: space-between;
}

.ow2-card__topline span {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(18, 21, 29, 0.08);
	color: var(--ow2-ink-2);
}

.ow2-card h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.55rem);
	font-weight: 950;
	line-height: 0.98;
	text-transform: uppercase;
	text-wrap: balance;
}

.ow2-card h2 a {
	color: var(--ow2-ink);
	text-decoration: none;
}

.ow2-card h2 a:hover,
.ow2-card h2 a:focus {
	color: var(--ow2-orange);
}

.ow2-card__excerpt {
	max-width: 68ch;
	margin: 0;
	color: #3f4a56;
}

.ow2-card__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
}

.ow2-loadout {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.ow2-loadout a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 8px;
	border-radius: 4px;
	background: var(--ow2-ink);
	color: var(--ow2-white);
	font-family: var(--ow2-mono);
	font-size: 0.7rem;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.ow2-loadout a:hover,
.ow2-loadout a:focus {
	background: var(--ow2-orange);
	color: var(--ow2-white);
}

.ow2-sidebar {
	position: sticky;
	top: 98px;
	display: grid;
	gap: 16px;
	min-width: 0;
}

.admin-bar .ow2-sidebar {
	top: 130px;
}

.ow2-panel,
.ow2-article,
.ow2-comments,
.comment-body {
	position: relative;
	border-radius: var(--ow2-radius);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76)),
		var(--ow2-white);
	box-shadow: var(--ow2-shadow);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
	overflow: hidden;
}

.ow2-panel {
	padding: 22px;
}

.ow2-panel::before,
.ow2-article::before,
.ow2-comments::before,
.comment-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 7px;
	background: linear-gradient(90deg, var(--ow2-orange), var(--ow2-yellow) 36%, var(--ow2-blue) 36% 70%, var(--ow2-ink) 70%);
}

.ow2-panel h2,
.ow2-widget__title,
.ow2-comments__title {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 950;
	line-height: 1;
	text-transform: uppercase;
}

.ow2-panel ul,
.ow2-panel ol {
	margin: 12px 0 0;
	padding-left: 18px;
}

.ow2-panel li + li {
	margin-top: 8px;
}

.ow2-link-list {
	list-style: none;
	padding-left: 0 !important;
}

.ow2-link-list li {
	padding: 0;
}

.ow2-link-list a {
	display: block;
	padding: 9px 10px;
	border-radius: 4px;
	background: rgba(18, 21, 29, 0.06);
	color: var(--ow2-ink);
	font-weight: 800;
	text-decoration: none;
}

.ow2-link-list a:hover,
.ow2-link-list a:focus {
	background: var(--ow2-ink);
	color: var(--ow2-white);
}

.ow2-meter {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	margin-top: 12px;
	color: var(--ow2-muted-dark);
	font-family: var(--ow2-mono);
	font-size: 0.72rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ow2-meter i {
	display: block;
	height: 9px;
	border-radius: 99px;
	background:
		linear-gradient(90deg, var(--ow2-blue), var(--ow2-orange) var(--value), rgba(18, 21, 29, 0.12) var(--value)),
		repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, 0.36) 14px 16px);
}

.ow2-page-head {
	position: relative;
	padding: clamp(48px, 7vw, 82px) 0 34px;
	background:
		linear-gradient(135deg, rgba(18, 21, 29, 0.90), rgba(18, 21, 29, 0.58) 46%, transparent 46%),
		linear-gradient(90deg, rgba(240, 100, 20, 0.20), transparent 40%, rgba(24, 185, 255, 0.18));
	color: var(--ow2-white);
	overflow: hidden;
}

.ow2-page-head::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(90deg, transparent 0 76px, rgba(255, 255, 255, 0.05) 76px 77px),
		linear-gradient(115deg, transparent 0 74%, rgba(255, 255, 255, 0.12) 74.2% 74.8%, transparent 75%);
	pointer-events: none;
}

.ow2-page-head .ow2-shell {
	position: relative;
	z-index: 1;
}

.ow2-page-head h1 {
	font-size: clamp(2.25rem, 6vw, 5.4rem);
}

.ow2-page-head__desc {
	max-width: 760px;
	margin-top: 16px;
	color: rgba(244, 242, 235, 0.78);
}

.ow2-article {
	padding: clamp(22px, 5vw, 48px);
}

.ow2-article__header {
	display: grid;
	gap: 12px;
	margin-bottom: 26px;
}

.ow2-article h1 {
	color: var(--ow2-ink);
	font-size: clamp(2rem, 5.7vw, 5.2rem);
}

.ow2-article__actions {
	margin-top: 8px;
}

.ow2-featured {
	position: relative;
	margin: 0 0 30px;
	border-radius: var(--ow2-radius);
	background: var(--ow2-ink);
	clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
	overflow: hidden;
}

.ow2-featured::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 54%, rgba(18, 21, 29, 0.50)),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 7px);
	pointer-events: none;
}

.ow2-featured img {
	display: block;
	width: 100%;
	max-height: 580px;
	object-fit: cover;
}

.ow2-content {
	max-width: 100%;
	color: #27313c;
	overflow-wrap: anywhere;
}

.ow2-content > *:first-child {
	margin-top: 0;
}

.ow2-content > *:last-child {
	margin-bottom: 0;
}

.ow2-content h2,
.ow2-content h3,
.ow2-content h4 {
	margin-top: 1.75em;
	color: var(--ow2-ink);
	line-height: 1.12;
}

.ow2-content h2 {
	padding-bottom: 9px;
	border-bottom: 4px solid var(--ow2-orange);
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: 950;
	text-transform: uppercase;
}

.ow2-content h3 {
	font-size: clamp(1.22rem, 2vw, 1.55rem);
}

.ow2-content a {
	font-weight: 800;
}

.ow2-content .alignwide {
	max-width: min(1080px, 100%);
}

.ow2-content .alignfull {
	width: calc(100% + clamp(44px, 10vw, 96px));
	max-width: none;
	margin-left: calc(clamp(22px, 5vw, 48px) * -1);
}

.wp-caption,
.wp-block-image figcaption,
.gallery-caption {
	color: var(--ow2-muted-dark);
	font-size: 0.88rem;
}

.wp-block-image img,
.wp-block-gallery img {
	border-radius: var(--ow2-radius);
}

.ow2-post-nav,
.ow2-post-pages,
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
}

.ow2-post-nav {
	justify-content: space-between;
}

.ow2-post-nav a,
.ow2-post-pages a,
.post-page-numbers {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 15px;
	border-radius: var(--ow2-radius);
	background: var(--ow2-ink);
	color: var(--ow2-white);
	font-weight: 950;
	text-decoration: none;
	text-transform: uppercase;
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.ow2-post-nav a:hover,
.ow2-post-nav a:focus,
.ow2-post-pages a:hover,
.ow2-post-pages a:focus {
	background: var(--ow2-orange);
	color: var(--ow2-white);
}

.page-numbers.current {
	background: var(--ow2-ink);
	color: var(--ow2-white);
}

.ow2-comments {
	margin-top: 28px;
	padding: clamp(20px, 4vw, 32px);
}

.ow2-comment-list,
.comment-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-body {
	padding: 20px;
}

.comment-meta {
	color: var(--ow2-muted-dark);
	font-size: 0.88rem;
	font-weight: 800;
}

.comment-content {
	margin-top: 12px;
}

.comment-reply-link {
	display: inline-flex;
	min-height: 34px;
	padding: 8px 10px;
	border-radius: 4px;
	background: var(--ow2-ink);
	color: var(--ow2-white);
	font-size: 0.78rem;
	font-weight: 950;
	text-decoration: none;
	text-transform: uppercase;
}

.comment-reply-link:hover,
.comment-reply-link:focus {
	background: var(--ow2-orange);
	color: var(--ow2-white);
}

.comment-form {
	display: grid;
	gap: 14px;
	margin-top: 20px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 900;
	text-transform: uppercase;
}

.comment-form input:not([type="submit"]),
.comment-form textarea,
.search-form input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid rgba(18, 21, 29, 0.18);
	border-radius: var(--ow2-radius);
	background:
		linear-gradient(90deg, rgba(24, 185, 255, 0.08), transparent 28%),
		rgba(255, 255, 255, 0.86);
	color: var(--ow2-ink);
}

.comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.search-form label {
	flex: 1 1 260px;
	margin: 0;
}

.ow2-empty {
	padding: clamp(22px, 4vw, 38px);
}

.ow2-error {
	grid-column: 1;
}

.sticky .ow2-card__topline::before {
	content: "PINNED";
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--ow2-orange);
	color: var(--ow2-white);
}

.bypostauthor .comment-body {
	box-shadow: 0 0 0 2px rgba(24, 185, 255, 0.34), var(--ow2-shadow);
}

.ow2-footer {
	border-top: 1px solid rgba(18, 21, 29, 0.14);
	background: var(--ow2-ink);
	color: rgba(244, 242, 235, 0.74);
}

.ow2-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 30px 0;
}

.ow2-footer p {
	margin: 0;
}

.ow2-footer__status {
	display: flex;
	gap: 7px;
	align-items: center;
}

.ow2-footer__status span {
	width: 34px;
	height: 8px;
	border-radius: 99px;
	background: var(--ow2-orange);
	box-shadow: 0 0 16px rgba(240, 100, 20, 0.62);
}

.ow2-footer__status span:nth-child(2) {
	background: var(--ow2-blue);
	box-shadow: 0 0 16px rgba(24, 185, 255, 0.62);
}

.ow2-footer__status span:nth-child(3) {
	background: var(--ow2-yellow);
	box-shadow: 0 0 16px rgba(255, 200, 61, 0.50);
}

body.ow2-boost {
	--ow2-orange: #ff741c;
	--ow2-blue: #31caff;
}

body.ow2-boost .ow2-topbar {
	background:
		linear-gradient(90deg, rgba(255, 116, 28, 0.32), transparent 22%, rgba(49, 202, 255, 0.18) 76%, transparent),
		rgba(17, 21, 30, 0.94);
}

[data-copy-state="success"] {
	background: var(--ow2-green) !important;
	color: var(--ow2-ink) !important;
}

[data-copy-state="error"] {
	background: var(--ow2-red) !important;
	color: var(--ow2-white) !important;
}

@keyframes ow2-ripple {
	0% {
		opacity: 0.62;
		transform: translate(-50%, -50%) scale(0.14);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes ow2-ring {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 980px) {
	.ow2-topbar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 68px;
		padding: 10px 0;
	}

	.ow2-nav-toggle {
		display: inline-flex;
	}

	.ow2-nav {
		grid-column: 1 / -1;
		justify-self: stretch;
		max-height: 0;
		border-radius: var(--ow2-radius);
		background: rgba(17, 21, 30, 0.98);
		opacity: 0;
		overflow: hidden;
		transform: translateY(-8px);
		transition: max-height 220ms ease, opacity 160ms ease, transform 220ms ease;
		visibility: hidden;
	}

	.ow2-nav.is-open {
		max-height: min(calc(var(--ow2-vh) * 72), calc(100vh - 92px));
		opacity: 1;
		overflow-y: auto;
		transform: translateY(0);
		visibility: visible;
	}

	.ow2-menu,
	.ow2-nav ul {
		display: grid;
		gap: 7px;
		padding: 10px;
	}

	.ow2-menu a,
	.ow2-nav .page_item a {
		width: 100%;
		min-height: 46px;
	}

	.ow2-quickbar {
		grid-column: 1 / -1;
		justify-content: stretch;
		width: 100%;
	}

	.ow2-quickbar__button {
		flex: 1 1 0;
	}

	.ow2-hero__grid,
	.ow2-layout,
	.ow2-layout--single {
		grid-template-columns: 1fr;
	}

	.ow2-hero__grid {
		min-height: auto;
	}

	.ow2-sidebar {
		position: static;
	}

	.ow2-layout--single .ow2-sidebar {
		display: none;
	}

	.ow2-card {
		grid-template-columns: minmax(180px, 36%) minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.admin-bar .ow2-topbar,
	.admin-bar .ow2-progress {
		top: 46px;
	}
}

@media (max-width: 680px) {
	:root {
		--ow2-shell: min(100vw - 22px, 1220px);
	}

	body::after {
		opacity: 0.34;
	}

	.ow2-topbar {
		backdrop-filter: none;
	}

	.ow2-brand__sigil {
		width: 42px;
		height: 42px;
		flex-basis: 42px;
	}

	.ow2-brand__name,
	.ow2-brand__tag {
		max-width: 50vw;
	}

	.ow2-quickbar__button {
		min-width: 0;
		padding-inline: 8px;
		font-size: 0.76rem;
	}

	.ow2-hero {
		padding-top: 34px;
	}

	.ow2-hero h1,
	.ow2-page-head h1,
	.ow2-article h1,
	.ow2-empty h1,
	.ow2-error h1 {
		font-size: clamp(2.15rem, 13vw, 4rem);
		line-height: 0.95;
	}

	.ow2-hero-card {
		min-height: 360px;
	}

	.ow2-card {
		grid-template-columns: 1fr;
	}

	.ow2-card__media img,
	.ow2-card__media {
		min-height: 220px;
	}

	.ow2-card__body,
	.ow2-article,
	.ow2-panel,
	.ow2-comments {
		padding: 18px;
	}

	.ow2-card__bottom,
	.ow2-article__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.ow2-card__bottom .ow2-button,
	.ow2-article__actions .ow2-button {
		width: 100%;
	}

	.ow2-content .alignfull {
		width: 100%;
		margin-left: 0;
	}

	.ow2-featured img {
		aspect-ratio: 16 / 10;
		max-height: none;
		object-fit: cover;
	}

	.ow2-post-nav {
		display: grid;
		grid-template-columns: 1fr;
	}

	.ow2-post-nav a {
		width: 100%;
		justify-content: center;
	}

	.ow2-footer__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 440px) {
	.ow2-nav-toggle span:last-child,
	.ow2-quickbar__button span:last-child,
	.ow2-brand__tag {
		display: none;
	}

	.ow2-brand__name {
		max-width: 58vw;
	}

	.ow2-hero-card {
		min-height: 320px;
	}

	.ow2-hero-card__portrait {
		inset: 82px 8% 108px;
	}

	.ow2-button,
	.page-numbers,
	.post-page-numbers,
	.comment-form input[type="submit"],
	.search-form input[type="submit"] {
		width: 100%;
	}
}

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

	.ow2-card,
	.ow2-hero-card,
	body::before {
		transform: none !important;
	}

	.ow2-ripple {
		display: none;
	}
}

/* OW2 lobby pass */
.ow2-profile-chip {
	display: inline-grid;
	grid-template-columns: 28px auto;
	grid-template-rows: auto auto;
	column-gap: 8px;
	align-items: center;
	min-height: 42px;
	padding: 6px 10px 6px 7px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ow2-radius);
	background: rgba(255, 255, 255, 0.07);
	color: var(--ow2-white);
	font-family: var(--ow2-mono);
	font-size: 0.64rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.ow2-profile-chip__avatar {
	grid-row: 1 / 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background:
		linear-gradient(135deg, var(--ow2-orange) 0 45%, transparent 45%),
		radial-gradient(circle, var(--ow2-blue) 0 36%, var(--ow2-white) 37% 52%, var(--ow2-ink) 53%);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.ow2-profile-chip strong {
	color: var(--ow2-blue-2);
	font-size: 0.68rem;
}

.ow2-lobby {
	min-height: calc(var(--ow2-vh) * 100 - 74px);
	padding: clamp(26px, 4vw, 48px) 0 18px;
	background:
		linear-gradient(90deg, rgba(13, 17, 25, 0.94) 0 35%, rgba(13, 17, 25, 0.62) 35% 56%, rgba(13, 17, 25, 0.06) 56%),
		linear-gradient(115deg, transparent 0 58%, rgba(24, 185, 255, 0.20) 58.2% 58.8%, transparent 59%),
		linear-gradient(245deg, transparent 0 63%, rgba(240, 100, 20, 0.20) 63.2% 63.8%, transparent 64%),
		linear-gradient(180deg, #eef3f8, #cfd8e3);
	color: var(--ow2-white);
}

.ow2-lobby::before {
	background:
		repeating-linear-gradient(90deg, transparent 0 84px, rgba(255, 255, 255, 0.06) 84px 85px),
		repeating-linear-gradient(0deg, transparent 0 72px, rgba(255, 255, 255, 0.045) 72px 73px),
		linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, 0.08) 32.2% 32.7%, transparent 33%);
	mask-image: linear-gradient(90deg, #000 0 64%, transparent);
}

.ow2-lobby__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) minmax(260px, 320px);
	gap: clamp(18px, 2.5vw, 30px);
	align-items: stretch;
	min-height: clamp(560px, 70vh, 760px);
}

.ow2-lobby__menu {
	position: relative;
	z-index: 4;
	align-self: center;
	display: grid;
	gap: 12px;
}

.ow2-event-button,
.ow2-menu-button,
.ow2-secondary-buttons a {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 64px;
	padding: 12px 22px 12px 18px;
	border: 0;
	border-radius: 0;
	color: var(--ow2-ink);
	text-decoration: none;
	clip-path: polygon(16px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
	box-shadow: inset 0 -5px 0 rgba(18, 21, 29, 0.13), 0 16px 30px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.ow2-event-button::before,
.ow2-menu-button::before,
.ow2-secondary-buttons a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	transition: background 160ms ease, transform 160ms ease;
}

.ow2-event-button {
	min-height: 72px;
	color: var(--ow2-white);
}

.ow2-event-button::before {
	background: linear-gradient(135deg, var(--ow2-orange), var(--ow2-orange-2));
}

.ow2-event-button strong,
.ow2-menu-button span {
	font-size: clamp(1.42rem, 2.1vw, 2rem);
	font-weight: 950;
	line-height: 0.92;
	text-transform: uppercase;
}

.ow2-event-button small,
.ow2-menu-button small {
	margin-top: 5px;
	color: rgba(18, 21, 29, 0.62);
	font-family: var(--ow2-mono);
	font-size: 0.68rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ow2-event-button small {
	color: rgba(255, 255, 255, 0.82);
}

.ow2-new-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	min-height: 19px;
	margin-bottom: 6px;
	padding: 3px 7px;
	border-radius: 2px;
	background: var(--ow2-yellow);
	color: var(--ow2-ink);
	font-family: var(--ow2-mono);
	font-size: 0.62rem;
	font-weight: 950;
	line-height: 1;
	text-transform: uppercase;
}

.ow2-main-buttons {
	display: grid;
	gap: 8px;
}

.ow2-menu-button:hover,
.ow2-menu-button:focus,
.ow2-menu-button.is-active,
.ow2-secondary-buttons a:hover,
.ow2-secondary-buttons a:focus,
.ow2-secondary-buttons a.is-active {
	color: var(--ow2-white);
	transform: translateX(8px);
}

.ow2-menu-button:hover::before,
.ow2-menu-button:focus::before,
.ow2-menu-button.is-active::before,
.ow2-secondary-buttons a:hover::before,
.ow2-secondary-buttons a:focus::before,
.ow2-secondary-buttons a.is-active::before {
	background: linear-gradient(135deg, var(--ow2-orange), var(--ow2-orange-2));
}

.ow2-menu-button:hover small,
.ow2-menu-button:focus small,
.ow2-menu-button.is-active small,
.ow2-secondary-buttons a:hover small,
.ow2-secondary-buttons a:focus small {
	color: rgba(255, 255, 255, 0.84);
}

.ow2-event-button:hover,
.ow2-event-button:focus {
	color: var(--ow2-white);
	transform: translateX(8px);
}

.ow2-event-button:hover::before,
.ow2-event-button:focus::before {
	background: linear-gradient(135deg, #ff741c, #ffb13d);
}

.ow2-secondary-buttons {
	display: grid;
	gap: 7px;
	margin-top: 4px;
}

.ow2-secondary-buttons a {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	min-height: 43px;
	padding: 9px 14px;
	font-size: 0.84rem;
	font-weight: 950;
	text-transform: uppercase;
}

.ow2-secondary-buttons .ow2-new-tag {
	margin: 0;
}

.ow2-lobby__stage {
	position: relative;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, 0.20);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.26) 34%, transparent 34%),
		linear-gradient(315deg, rgba(24, 185, 255, 0.22), transparent 52%),
		linear-gradient(180deg, rgba(35, 45, 59, 0.92), rgba(15, 20, 30, 0.90));
	clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
	isolation: isolate;
	overflow: hidden;
}

.ow2-lobby__stage::before {
	content: "";
	position: absolute;
	inset: 18px;
	z-index: -1;
	border: 1px solid rgba(255, 255, 255, 0.20);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(135deg, rgba(240, 100, 20, 0.20), transparent 26%),
		linear-gradient(315deg, rgba(24, 185, 255, 0.20), transparent 32%);
	background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%;
	clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

.ow2-lobby-title {
	position: absolute;
	top: 28px;
	left: 30px;
	z-index: 3;
	max-width: min(520px, calc(100% - 60px));
}

.ow2-lobby-title h1 {
	margin: 0;
	color: var(--ow2-white);
	font-size: clamp(2.1rem, 4.8vw, 5.2rem);
	font-weight: 950;
	line-height: 0.9;
	text-transform: uppercase;
}

.ow2-lobby-title p:not(.ow2-eyebrow) {
	max-width: 46ch;
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 700;
}

.ow2-hero-silhouette {
	position: absolute;
	inset: 118px 8% 72px;
	z-index: 2;
	display: grid;
	place-items: center;
	filter: drop-shadow(0 34px 52px rgba(0, 0, 0, 0.40));
}

.ow2-hero-silhouette__ring {
	position: absolute;
	width: min(86%, 440px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		conic-gradient(from 225deg, var(--ow2-orange) 0 12%, transparent 12% 32%, var(--ow2-blue) 32% 45%, transparent 45% 70%, var(--ow2-yellow) 70% 80%, transparent 80%),
		radial-gradient(circle, rgba(24, 185, 255, 0.18), transparent 64%);
	animation: ow2-ring 15s linear infinite;
}

.ow2-hero-silhouette__body {
	position: absolute;
	width: min(58%, 320px);
	aspect-ratio: 0.72;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0 27%, transparent 27%),
		linear-gradient(180deg, #f8f8f2 0 22%, #8794a3 22% 54%, #263240 54% 100%);
	clip-path: polygon(22% 0, 78% 0, 100% 28%, 84% 100%, 16% 100%, 0 28%);
	box-shadow: inset 0 -26px 0 rgba(0, 0, 0, 0.17);
}

.ow2-hero-silhouette__visor {
	position: absolute;
	top: 29%;
	width: min(34%, 178px);
	height: 38px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ow2-blue), var(--ow2-blue-2));
	box-shadow: 0 0 30px rgba(24, 185, 255, 0.82);
}

.ow2-hero-silhouette__weapon {
	position: absolute;
	right: 8%;
	bottom: 20%;
	width: min(46%, 300px);
	height: 32px;
	background:
		linear-gradient(90deg, var(--ow2-orange) 0 62%, var(--ow2-white) 62% 78%, var(--ow2-ink) 78%);
	clip-path: polygon(16px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
	transform: rotate(-10deg);
}

.ow2-lobby-status {
	position: absolute;
	right: 24px;
	bottom: 22px;
	left: 24px;
	z-index: 4;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 12px;
	background: rgba(17, 21, 30, 0.82);
	color: var(--ow2-white);
	clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
	backdrop-filter: blur(12px);
}

.ow2-lobby-status span {
	padding: 7px 10px;
	background: var(--ow2-orange);
	font-family: var(--ow2-mono);
	font-size: 0.72rem;
	font-weight: 950;
	text-transform: uppercase;
	clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.ow2-lobby-status strong {
	min-width: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.84);
	font-family: var(--ow2-mono);
	font-size: 0.78rem;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.ow2-lobby__stage[data-panel="heroes"] .ow2-hero-silhouette__ring,
.ow2-lobby__stage[data-panel="social"] .ow2-hero-silhouette__ring {
	filter: hue-rotate(42deg);
}

.ow2-lobby__stage[data-panel="shop"] .ow2-hero-silhouette__ring,
.ow2-lobby__stage[data-panel="battlepass"] .ow2-hero-silhouette__ring {
	filter: hue-rotate(-32deg) saturate(1.25);
}

.ow2-news-panel {
	position: relative;
	align-self: start;
	margin-top: clamp(38px, 8vh, 78px);
	background: rgba(17, 21, 30, 0.88);
	color: var(--ow2-white);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	backdrop-filter: blur(14px);
}

.ow2-panel-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 8px;
	gap: 6px;
	background: rgba(255, 255, 255, 0.06);
}

.ow2-panel-tabs button {
	min-height: 38px;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.70);
	font-size: 0.76rem;
	font-weight: 950;
	text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	cursor: pointer;
}

.ow2-panel-tabs button.is-active {
	background: var(--ow2-white);
	color: var(--ow2-ink);
}

.ow2-news-panel__body {
	display: none;
	padding: 22px;
}

.ow2-news-panel__body.is-active {
	display: grid;
	gap: 12px;
}

.ow2-news-panel__body h2 {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 950;
	line-height: 1;
	text-transform: uppercase;
}

.ow2-news-panel__body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

.ow2-panel-link {
	display: inline-flex;
	justify-content: center;
	min-height: 38px;
	padding: 10px 14px;
	background: var(--ow2-orange);
	color: var(--ow2-white);
	font-size: 0.78rem;
	font-weight: 950;
	text-decoration: none;
	text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.ow2-panel-link:hover,
.ow2-panel-link:focus {
	background: var(--ow2-orange-2);
	color: var(--ow2-white);
}

.ow2-challenge {
	display: grid;
	gap: 7px;
}

.ow2-challenge span {
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--ow2-mono);
	font-size: 0.72rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ow2-challenge i {
	display: block;
	height: 9px;
	background:
		linear-gradient(90deg, var(--ow2-blue), var(--ow2-orange) var(--value), rgba(255, 255, 255, 0.16) var(--value)),
		repeating-linear-gradient(90deg, transparent 0 14px, rgba(0, 0, 0, 0.28) 14px 16px);
	border-radius: 999px;
}

.ow2-role-queue {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 0.8fr);
	gap: 10px;
	margin-top: 18px;
	padding: 10px;
	background: rgba(17, 21, 30, 0.86);
	clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
	box-shadow: 0 20px 52px rgba(0, 0, 0, 0.26);
}

.ow2-role-queue button,
.ow2-queue-status {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 10px;
	align-items: center;
	min-height: 70px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.08);
	color: var(--ow2-white);
	text-align: left;
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
	cursor: pointer;
}

.ow2-role-queue button.is-active {
	border-color: rgba(255, 255, 255, 0.78);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ow2-ink);
	box-shadow: inset 0 -5px 0 rgba(18, 21, 29, 0.14);
}

.ow2-role-queue strong {
	font-size: 0.9rem;
	font-weight: 950;
	line-height: 1;
	text-transform: uppercase;
}

.ow2-role-queue small,
.ow2-queue-status span,
.ow2-queue-status strong {
	font-family: var(--ow2-mono);
	font-size: 0.68rem;
	font-weight: 900;
	text-transform: uppercase;
}

.ow2-role-queue small {
	color: currentColor;
	opacity: 0.70;
}

.ow2-role-icon {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	background: var(--ow2-ink);
}

.ow2-role-icon::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background: var(--ow2-blue);
}

.ow2-role-icon--tank::before {
	clip-path: polygon(50% 0, 92% 18%, 80% 100%, 20% 100%, 8% 18%);
	background: var(--ow2-yellow);
}

.ow2-role-icon--damage::before {
	clip-path: polygon(48% 0, 60% 38%, 100% 44%, 66% 62%, 78% 100%, 48% 74%, 18% 100%, 30% 62%, 0 44%, 38% 38%);
	background: var(--ow2-orange);
}

.ow2-role-icon--support::before {
	clip-path: polygon(38% 0, 62% 0, 62% 36%, 100% 36%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 36%, 38% 36%);
	background: var(--ow2-blue);
}

.ow2-queue-status {
	cursor: default;
	background: linear-gradient(135deg, rgba(24, 185, 255, 0.18), rgba(255, 255, 255, 0.08));
}

.ow2-queue-status span,
.ow2-queue-status strong {
	grid-column: 1 / -1;
}

.ow2-queue-status span {
	color: var(--ow2-blue-2);
}

.ow2-objective-bar {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, rgba(18, 21, 29, 0.12), rgba(18, 21, 29, 0.08)),
		repeating-linear-gradient(90deg, transparent 0 26px, rgba(18, 21, 29, 0.14) 26px 28px);
	overflow: hidden;
}

.ow2-objective-bar span {
	display: block;
	width: var(--value);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ow2-blue), var(--ow2-orange));
	box-shadow: 0 0 18px rgba(24, 185, 255, 0.28);
}

.ow2-card__mode {
	background: var(--ow2-orange) !important;
	color: var(--ow2-white) !important;
}

@media (max-width: 1120px) {
	.ow2-lobby__grid {
		grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
	}

	.ow2-news-panel {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		margin-top: 0;
	}

	.ow2-panel-tabs {
		grid-template-columns: 1fr;
		align-content: start;
	}
}

@media (max-width: 980px) {
	.ow2-profile-chip {
		display: none;
	}

	.ow2-lobby__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.ow2-lobby__menu {
		order: 2;
		align-self: stretch;
	}

	.ow2-lobby__stage {
		order: 1;
		min-height: 520px;
	}

	.ow2-news-panel {
		order: 3;
		grid-template-columns: 1fr;
	}

	.ow2-panel-tabs {
		grid-template-columns: 1fr 1fr;
	}

	.ow2-role-queue {
		grid-template-columns: 1fr 1fr;
	}

	.ow2-queue-status {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	.ow2-lobby {
		padding-top: 18px;
	}

	.ow2-lobby__stage {
		min-height: 430px;
	}

	.ow2-lobby-title {
		top: 20px;
		left: 20px;
		max-width: calc(100% - 40px);
	}

	.ow2-lobby-title h1 {
		font-size: clamp(2.1rem, 13vw, 4rem);
	}

	.ow2-hero-silhouette {
		inset: 122px 4% 70px;
	}

	.ow2-menu-button,
	.ow2-event-button {
		min-height: 62px;
	}

	.ow2-menu-button:hover,
	.ow2-menu-button:focus,
	.ow2-menu-button.is-active,
	.ow2-secondary-buttons a:hover,
	.ow2-secondary-buttons a:focus,
	.ow2-secondary-buttons a.is-active,
	.ow2-event-button:hover,
	.ow2-event-button:focus {
		transform: translateX(0);
	}

	.ow2-role-queue {
		grid-template-columns: 1fr;
		clip-path: none;
		border-radius: var(--ow2-radius);
	}

	.ow2-news-panel,
	.ow2-lobby__stage {
		clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
	}
}

/* Reference pass: calmer, image-led command UI */
body {
	background:
		radial-gradient(circle at 74% 24%, rgba(89, 190, 255, 0.30), transparent 28%),
		radial-gradient(circle at 78% 72%, rgba(255, 128, 39, 0.18), transparent 26%),
		linear-gradient(115deg, rgba(8, 11, 17, 0.92) 0 31%, rgba(8, 11, 17, 0.34) 31.2% 42%, transparent 42.2%),
		linear-gradient(180deg, #e9eef4, #cfd8e3);
	font-family: var(--ow2-font);
}

body::before {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	opacity: 0.28;
	mask-image: linear-gradient(90deg, #000 0 42%, transparent 78%);
}

body::after {
	display: none;
}

.ow2-topbar {
	min-height: 64px;
	border-bottom: 0;
	background: linear-gradient(90deg, rgba(11, 15, 23, 0.78), rgba(11, 15, 23, 0.18) 48%, rgba(11, 15, 23, 0.82));
	box-shadow: none;
}

.ow2-topbar::before {
	opacity: 0.2;
}

.ow2-topbar__inner {
	min-height: 64px;
}

.ow2-brand__sigil {
	width: 38px;
	height: 38px;
	flex-basis: 38px;
	border: 0;
	border-radius: 50%;
	background:
		conic-gradient(from 212deg, var(--ow2-orange) 0 18%, transparent 18% 32%, rgba(255, 255, 255, 0.96) 32% 58%, transparent 58% 72%, var(--ow2-blue) 72% 84%, transparent 84%),
		radial-gradient(circle, rgba(24, 185, 255, 0.18) 0 42%, rgba(255, 255, 255, 0.12) 43% 54%, rgba(10, 14, 22, 0.88) 55%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.22),
		0 0 18px rgba(24, 185, 255, 0.18),
		inset 0 -4px 0 rgba(0, 0, 0, 0.20);
	overflow: hidden;
}

.ow2-brand__sigil::before,
.ow2-brand__sigil::after,
.ow2-brand__sigil span {
	display: block;
}

.ow2-brand__sigil::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.94) 0 8%, transparent 9%),
		linear-gradient(90deg, transparent 0 44%, rgba(255, 255, 255, 0.95) 45% 55%, transparent 56%),
		linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, 0.88) 45% 52%, transparent 53%),
		linear-gradient(65deg, transparent 0 44%, rgba(255, 255, 255, 0.88) 45% 52%, transparent 53%);
	clip-path: polygon(50% 8%, 88% 88%, 62% 88%, 50% 58%, 38% 88%, 12% 88%);
}

.ow2-brand__sigil::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	height: 12px;
	border-radius: 50% 50% 0 0;
	border-top: 2px solid rgba(24, 185, 255, 0.96);
	opacity: 0.95;
}

.ow2-brand__sigil .ow2-brand__sensor {
	position: absolute;
	top: 9px;
	left: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ow2-blue);
	box-shadow:
		0 0 10px rgba(24, 185, 255, 0.95),
		-9px 10px 0 -1px rgba(24, 185, 255, 0.55),
		9px 10px 0 -1px rgba(24, 185, 255, 0.55);
	transform: translateX(-50%);
	bottom: auto;
}

.ow2-brand__sigil .ow2-brand__road {
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 7px;
	height: 18px;
	width: auto;
	border-radius: 0;
	background:
		linear-gradient(90deg, transparent 0 42%, rgba(10, 14, 22, 0.96) 42% 58%, transparent 58%),
		linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.96) 36% 43%, transparent 44%),
		linear-gradient(65deg, transparent 0 35%, rgba(255, 255, 255, 0.96) 36% 43%, transparent 44%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	opacity: 0.98;
	box-shadow: none;
	transform: none;
}

.ow2-brand__sigil .ow2-brand__ping {
	position: absolute;
	right: 5px;
	top: 12px;
	width: 9px;
	height: 9px;
	bottom: auto;
	border-radius: 0;
	background: transparent;
	border-top: 2px solid var(--ow2-orange);
	border-right: 2px solid var(--ow2-orange);
	transform: rotate(45deg);
	filter: drop-shadow(0 0 6px rgba(240, 100, 20, 0.82));
	box-shadow: none;
}

.ow2-brand__name {
	font-size: 1.02rem;
	letter-spacing: 0.02em;
}

.ow2-brand__tag {
	display: none;
}

.ow2-menu a,
.ow2-nav .page_item a {
	min-height: 34px;
	padding: 7px 12px;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}

.ow2-quickbar__button {
	min-height: 36px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ow2-ink);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}

.ow2-quickbar__button span:first-child {
	background: transparent;
	box-shadow: none;
}

.ow2-profile-chip {
	min-height: 36px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ow2-ink);
}

.ow2-lobby {
	min-height: calc(var(--ow2-vh) * 100 - 64px);
	padding-top: clamp(20px, 4vw, 42px);
	background:
		linear-gradient(90deg, rgba(9, 12, 18, 0.92) 0 32%, rgba(9, 12, 18, 0.32) 32.2% 49%, transparent 49.2%),
		radial-gradient(circle at 70% 34%, rgba(255, 255, 255, 0.75), transparent 21%),
		radial-gradient(circle at 76% 48%, rgba(37, 189, 255, 0.36), transparent 27%),
		linear-gradient(135deg, #eef3f7, #bcc8d5);
}

.ow2-lobby__grid {
	grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) minmax(220px, 286px);
	gap: clamp(18px, 3vw, 42px);
	min-height: clamp(520px, 67vh, 700px);
}

.ow2-lobby__menu {
	align-self: center;
	gap: 10px;
}

.ow2-event-button {
	min-height: 58px;
	padding: 10px 19px 10px 16px;
	opacity: 0.94;
}

.ow2-main-buttons {
	gap: 7px;
}

.ow2-menu-button {
	min-height: 54px;
	padding: 9px 18px 9px 16px;
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14), inset 0 -4px 0 rgba(0, 0, 0, 0.13);
}

.ow2-menu-button::before,
.ow2-secondary-buttons a::before {
	background: rgba(255, 255, 255, 0.96);
}

.ow2-event-button strong,
.ow2-menu-button span {
	font-size: clamp(1.45rem, 2.7vw, 2.35rem);
	font-style: italic;
	letter-spacing: 0.01em;
}

.ow2-menu-button small,
.ow2-event-button small,
.ow2-new-tag {
	display: none;
}

.ow2-menu-button:hover,
.ow2-menu-button:focus,
.ow2-menu-button.is-active,
.ow2-event-button:hover,
.ow2-event-button:focus {
	transform: translateX(10px);
}

.ow2-menu-button:hover::before,
.ow2-menu-button:focus::before,
.ow2-menu-button.is-active::before {
	background: rgba(255, 255, 255, 0.96);
}

.ow2-menu-button:hover,
.ow2-menu-button:focus,
.ow2-menu-button.is-active {
	color: var(--ow2-ink);
}

.ow2-menu-button::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	background: var(--ow2-orange);
	transition: width 160ms ease;
}

.ow2-menu-button:hover::after,
.ow2-menu-button:focus::after,
.ow2-menu-button.is-active::after {
	width: 9px;
}

.ow2-secondary-buttons {
	gap: 6px;
	margin-top: 8px;
}

.ow2-secondary-buttons a {
	min-height: 33px;
	padding: 7px 12px;
	background: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	font-style: italic;
	letter-spacing: 0.02em;
	box-shadow: none;
}

.ow2-secondary-buttons a:hover,
.ow2-secondary-buttons a:focus,
.ow2-secondary-buttons a.is-active {
	color: var(--ow2-ink);
	transform: translateX(6px);
}

.ow2-secondary-buttons a:hover::before,
.ow2-secondary-buttons a:focus::before,
.ow2-secondary-buttons a.is-active::before {
	background: rgba(255, 255, 255, 0.96);
}

.ow2-lobby__stage {
	border: 0;
	background:
		radial-gradient(circle at 56% 46%, rgba(255, 255, 255, 0.40), transparent 29%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 42%),
		transparent;
	box-shadow: none;
	clip-path: none;
	overflow: visible;
}

.ow2-lobby__stage::before {
	inset: 14%;
	border-color: rgba(255, 255, 255, 0.18);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
	background-size: 72px 72px;
	opacity: 0.46;
	clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.ow2-lobby-title {
	top: 10px;
	left: 4%;
	max-width: min(620px, 92%);
}

.ow2-lobby-title .ow2-eyebrow {
	display: none;
}

.ow2-lobby-title h1 {
	font-size: clamp(2.7rem, 7vw, 6.6rem);
	font-style: italic;
	letter-spacing: 0.01em;
	text-shadow: 0 14px 28px rgba(0, 0, 0, 0.20);
}

.ow2-lobby-title p:not(.ow2-eyebrow) {
	max-width: 32ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.12rem;
	line-height: 1.28;
}

.ow2-hero-silhouette {
	inset: 118px 0 58px;
	filter: drop-shadow(0 36px 52px rgba(0, 0, 0, 0.30));
}

.ow2-hero-silhouette__ring {
	width: min(72%, 430px);
	opacity: 0.82;
}

.ow2-hero-silhouette__body {
	width: min(48%, 300px);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0 28%, transparent 28%),
		linear-gradient(180deg, #fbfbf6 0 22%, #a4afbd 22% 54%, #2d3948 54% 100%);
}

.ow2-hero-silhouette__visor {
	height: 30px;
}

.ow2-hero-silhouette__weapon {
	opacity: 0.94;
}

.ow2-lobby-status {
	right: 8%;
	bottom: 24px;
	left: 8%;
	grid-template-columns: auto minmax(0, 1fr);
	padding: 8px;
	background: rgba(12, 16, 24, 0.72);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.ow2-lobby-status span {
	padding: 6px 10px;
	font-family: var(--ow2-font);
	font-size: 0.96rem;
	font-style: italic;
}

.ow2-lobby-status strong {
	font-size: 0.72rem;
}

.ow2-news-panel {
	margin-top: 54px;
	background: rgba(13, 17, 25, 0.76);
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(16px);
}

.ow2-panel-tabs {
	padding: 7px;
	background: rgba(255, 255, 255, 0.05);
}

.ow2-panel-tabs button {
	font-family: var(--ow2-font);
	font-size: 0.98rem;
	font-style: italic;
}

.ow2-news-panel__body {
	padding: 18px;
}

.ow2-news-panel__body h2 {
	font-size: 1.55rem;
	font-style: italic;
}

.ow2-news-panel__body p {
	font-size: 0.96rem;
	line-height: 1.42;
}

.ow2-panel-link {
	min-height: 34px;
	padding: 8px 13px;
	font-size: 0.96rem;
	font-style: italic;
}

.ow2-role-queue {
	grid-template-columns: repeat(3, minmax(0, 180px)) minmax(180px, 1fr);
	justify-content: center;
	margin-top: 8px;
	padding: 8px;
	background: rgba(13, 17, 25, 0.74);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
}

.ow2-role-queue button,
.ow2-queue-status {
	min-height: 62px;
	padding: 8px;
}

.ow2-role-icon {
	width: 42px;
	height: 42px;
}

.ow2-role-queue strong {
	font-size: 1.12rem;
	font-style: italic;
}

.ow2-role-queue small,
.ow2-queue-status span,
.ow2-queue-status strong {
	font-size: 0.64rem;
}

.ow2-card {
	grid-template-columns: minmax(170px, 28%) minmax(0, 1fr);
	min-height: 210px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 18px 38px rgba(7, 10, 16, 0.18);
}

.ow2-card h2 {
	font-size: clamp(1.45rem, 2.5vw, 2.25rem);
	font-style: italic;
	letter-spacing: 0.01em;
}

.ow2-card__topline,
.ow2-meta {
	font-family: var(--ow2-font);
	font-size: 0.9rem;
	font-style: italic;
}

.ow2-card__topline span {
	min-height: 22px;
}

.ow2-card__excerpt {
	line-height: 1.45;
}

.ow2-button,
.page-numbers,
.post-page-numbers,
.comment-form input[type="submit"],
.search-form input[type="submit"] {
	font-size: 1rem;
	font-style: italic;
	letter-spacing: 0.01em;
}

@media (max-width: 1120px) {
	.ow2-lobby__grid {
		grid-template-columns: minmax(230px, 330px) minmax(0, 1fr);
	}
}

@media (max-width: 980px) {
	.ow2-lobby__menu {
		order: 1;
	}

	.ow2-lobby__stage {
		order: 2;
		min-height: 480px;
	}

	.ow2-news-panel {
		margin-top: 0;
	}
}

@media (max-width: 680px) {
	.ow2-lobby-title h1 {
		font-size: clamp(2.25rem, 13vw, 4.3rem);
	}

	.ow2-hero-silhouette {
		inset: 126px 0 70px;
	}

	.ow2-news-panel,
	.ow2-lobby__stage {
		clip-path: none;
	}
}

/* Welcome-screen balance: lower and more right-weighted */
.ow2-lobby {
	padding-top: clamp(46px, 7vh, 86px);
	padding-bottom: 28px;
}

.ow2-lobby__grid {
	min-height: clamp(610px, 73vh, 790px);
	align-items: center;
}

.ow2-lobby__menu {
	align-self: center;
	transform: translateY(clamp(22px, 5vh, 56px));
}

.ow2-lobby__stage {
	align-self: stretch;
	min-height: clamp(590px, 72vh, 780px);
}

.ow2-lobby-title {
	top: clamp(34px, 6vh, 72px);
	left: 1%;
	max-width: min(600px, 88%);
	transform: translateX(-2%);
}

.ow2-hero-silhouette {
	inset: clamp(176px, 25vh, 244px) -8% clamp(22px, 5vh, 58px) 8%;
	place-items: end center;
}

.ow2-hero-silhouette__ring {
	width: min(78%, 500px);
}

.ow2-hero-silhouette__body {
	width: min(52%, 340px);
}

.ow2-hero-silhouette__weapon {
	right: 3%;
	bottom: 15%;
}

.ow2-lobby-status {
	right: 2%;
	bottom: clamp(22px, 5vh, 50px);
	left: 18%;
}

.ow2-news-panel {
	margin-top: clamp(96px, 16vh, 148px);
	transform: translateX(-8px);
}

.ow2-role-queue {
	margin-top: clamp(18px, 3vh, 34px);
	transform: translateY(8px);
}

@media (max-width: 1120px) {
	.ow2-lobby {
		padding-top: 38px;
	}

	.ow2-lobby__menu {
		transform: translateY(18px);
	}

	.ow2-news-panel {
		margin-top: 10px;
		transform: none;
	}
}

@media (max-width: 980px) {
	.ow2-lobby__stage {
		min-height: 560px;
	}

	.ow2-lobby-title {
		top: 24px;
		left: 0;
		transform: none;
	}

	.ow2-hero-silhouette {
		inset: 150px 0 44px;
		place-items: center;
	}

	.ow2-lobby-status {
		right: 6%;
		left: 6%;
	}
}

@media (max-width: 680px) {
	.ow2-lobby {
		padding-top: 22px;
	}

	.ow2-lobby__menu {
		transform: none;
	}

	.ow2-lobby__stage {
		min-height: 480px;
	}

	.ow2-hero-silhouette {
		inset: 142px 0 62px;
	}

	.ow2-role-queue {
		transform: none;
	}
}

/* Generated hero asset and welcome-to-feed transition */
:root {
	--ow2-hero-scroll: 0;
}

.ow2-lobby {
	position: relative;
	overflow: hidden;
}

.ow2-lobby::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 6;
	height: clamp(90px, 14vh, 160px);
	background:
		linear-gradient(180deg, transparent, rgba(219, 226, 235, 0.72) 58%, rgba(219, 226, 235, 1)),
		linear-gradient(115deg, transparent 0 48%, rgba(240, 100, 20, 0.18) 48.2% 49%, transparent 49.2%);
	pointer-events: none;
}

.ow2-hero-asset {
	position: absolute;
	right: -7%;
	bottom: clamp(22px, 5vh, 52px);
	z-index: 3;
	width: min(68vw, 720px);
	margin: 0;
	pointer-events: none;
	filter:
		drop-shadow(0 34px 58px rgba(0, 0, 0, 0.32))
		drop-shadow(0 0 28px rgba(24, 185, 255, 0.22));
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.42));
	transform:
		translate3d(calc(var(--ow2-hero-scroll) * 42px), calc(var(--ow2-hero-scroll) * 34px), 0)
		scale(calc(1 - (var(--ow2-hero-scroll) * 0.055)));
	transition: opacity 120ms linear, transform 120ms linear;
}

.ow2-hero-asset::before {
	content: "";
	position: absolute;
	inset: 17%;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(24, 185, 255, 0.38), rgba(24, 185, 255, 0.10) 42%, transparent 70%);
	filter: blur(18px);
	opacity: 0.75;
}

.ow2-hero-asset img {
	display: block;
	width: 100%;
	height: auto;
	animation: ow2-asset-breathe 5.8s ease-in-out infinite;
}

.ow2-lobby__stage::before {
	opacity: calc(0.46 - (var(--ow2-hero-scroll) * 0.20));
	transform: translateY(calc(var(--ow2-hero-scroll) * 22px));
}

.ow2-lobby-title,
.ow2-lobby__menu,
.ow2-news-panel {
	transition: opacity 120ms linear, transform 120ms linear;
}

.ow2-lobby-title {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.35));
}

.ow2-lobby__menu {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.18));
}

.ow2-news-panel {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.24));
}

#mission-feed {
	position: relative;
	margin-top: -22px;
	padding-top: clamp(64px, 9vw, 116px);
	opacity: calc(0.72 + (var(--ow2-hero-scroll) * 0.28));
	transform: translateY(calc((1 - var(--ow2-hero-scroll)) * 28px));
	transition: opacity 120ms linear, transform 120ms linear;
}

#mission-feed::before {
	content: "";
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	left: calc(50% - 50vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
}

@keyframes ow2-asset-breathe {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-8px) scale(1.012);
	}
}

@supports (animation-timeline: scroll()) {
	.ow2-hero-asset {
		animation: ow2-scroll-asset both linear;
		animation-timeline: scroll(root);
		animation-range: 0 620px;
	}

	#mission-feed {
		animation: ow2-scroll-feed both linear;
		animation-timeline: scroll(root);
		animation-range: 120px 680px;
	}
}

@keyframes ow2-scroll-asset {
	to {
		opacity: 0.58;
		transform: translate3d(42px, 34px, 0) scale(0.945);
	}
}

@keyframes ow2-scroll-feed {
	from {
		opacity: 0.72;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1120px) {
	.ow2-hero-asset {
		right: -10%;
		width: min(78vw, 660px);
	}
}

@media (max-width: 980px) {
	.ow2-hero-asset {
		right: 50%;
		bottom: 32px;
		width: min(84vw, 560px);
		transform:
			translate3d(calc(50% + (var(--ow2-hero-scroll) * 18px)), calc(var(--ow2-hero-scroll) * 26px), 0)
			scale(calc(1 - (var(--ow2-hero-scroll) * 0.05)));
	}
}

@media (max-width: 680px) {
	.ow2-hero-asset {
		bottom: 38px;
		width: min(96vw, 440px);
	}

	#mission-feed {
		margin-top: -12px;
		padding-top: 62px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ow2-hero-asset,
	.ow2-hero-asset img,
	#mission-feed {
		animation: none !important;
		transform: none !important;
	}
}

/* Article tag mark and stronger hero/feed transition */
.ow2-loadout a {
	position: relative;
	gap: 7px;
	min-height: 30px;
	padding: 5px 10px 5px 8px;
	border: 1px solid rgba(24, 185, 255, 0.22);
	background:
		linear-gradient(135deg, rgba(24, 185, 255, 0.12), transparent 58%),
		rgba(13, 17, 25, 0.94);
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--ow2-font);
	font-size: 0.86rem;
	font-style: italic;
	letter-spacing: 0.01em;
	clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}

.ow2-loadout a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background:
		radial-gradient(circle at 50% 50%, var(--ow2-blue) 0 2px, transparent 3px),
		conic-gradient(from 210deg, var(--ow2-orange) 0 16%, transparent 16% 40%, var(--ow2-blue) 40% 54%, transparent 54%),
		linear-gradient(90deg, transparent 0 43%, rgba(255, 255, 255, 0.92) 43% 57%, transparent 57%),
		linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.82) 41% 48%, transparent 49%),
		linear-gradient(65deg, transparent 0 40%, rgba(255, 255, 255, 0.82) 41% 48%, transparent 49%);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(24, 185, 255, 0.32);
}

.ow2-loadout a:hover,
.ow2-loadout a:focus {
	border-color: rgba(240, 100, 20, 0.56);
	background:
		linear-gradient(135deg, rgba(240, 100, 20, 0.34), rgba(240, 100, 20, 0.16)),
		rgba(13, 17, 25, 0.96);
	color: var(--ow2-white);
}

.ow2-hero-asset {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.68));
	transform:
		translate3d(calc(var(--ow2-hero-scroll) * 120px), calc(var(--ow2-hero-scroll) * 96px), 0)
		scale(calc(1 - (var(--ow2-hero-scroll) * 0.16)))
		rotate(calc(var(--ow2-hero-scroll) * -5deg));
	transition: opacity 80ms linear, transform 80ms linear;
}

.ow2-lobby__stage::before {
	opacity: calc(0.46 - (var(--ow2-hero-scroll) * 0.36));
	transform: translateY(calc(var(--ow2-hero-scroll) * 72px)) scale(calc(1 + (var(--ow2-hero-scroll) * 0.05)));
}

.ow2-lobby-title {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.72));
	transform: translate3d(calc(var(--ow2-hero-scroll) * -34px), calc(var(--ow2-hero-scroll) * -24px), 0);
}

.ow2-lobby__menu {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.48));
	transform: translate3d(0, calc(clamp(22px, 5vh, 56px) - (var(--ow2-hero-scroll) * 46px)), 0);
}

.ow2-news-panel {
	opacity: calc(1 - (var(--ow2-hero-scroll) * 0.54));
	transform: translate3d(-8px, calc(var(--ow2-hero-scroll) * -40px), 0);
}

#mission-feed {
	margin-top: -54px;
	padding-top: clamp(92px, 13vw, 156px);
	opacity: calc(0.48 + (var(--ow2-hero-scroll) * 0.52));
	transform: translateY(calc((1 - var(--ow2-hero-scroll)) * 92px));
	transition: opacity 80ms linear, transform 80ms linear;
}

.ow2-section-title,
.ow2-post-card,
.ow2-card {
	transition: transform 160ms ease, opacity 160ms ease;
}

@keyframes ow2-scroll-asset {
	to {
		opacity: 0.32;
		transform: translate3d(120px, 96px, 0) scale(0.84) rotate(-5deg);
	}
}

@keyframes ow2-scroll-feed {
	from {
		opacity: 0.48;
		transform: translateY(92px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 980px) {
	.ow2-hero-asset {
		transform:
			translate3d(calc(50% + (var(--ow2-hero-scroll) * 34px)), calc(var(--ow2-hero-scroll) * 70px), 0)
			scale(calc(1 - (var(--ow2-hero-scroll) * 0.13)))
			rotate(calc(var(--ow2-hero-scroll) * -4deg));
	}

	.ow2-lobby__menu {
		transform: translateY(calc(18px - (var(--ow2-hero-scroll) * 24px)));
	}

	.ow2-news-panel {
		transform: translateY(calc(var(--ow2-hero-scroll) * -24px));
	}
}

@media (max-width: 680px) {
	.ow2-lobby__menu,
	.ow2-news-panel {
		transform: none;
	}

	#mission-feed {
		margin-top: -28px;
		padding-top: 86px;
		transform: translateY(calc((1 - var(--ow2-hero-scroll)) * 54px));
	}
}