/*
 * OverPower web track: shared component styles.
 * Values come from theme.json presets (var(--wp--preset--…) and var(--wp--custom--…)).
 * Source of the look: the Site Rules canvas (Design Polish, 30 Sep 2026): stamped headings and buttons,
 * card-stock panels, the crimp section breaker, plain drop-down menus, the community block. Recorded in
 * claude/design-system.md once Mr Manager approves.
 */

/* ---------- Ground: deep navy with the cyan dot halftone ---------- */
body {
	background-color: var(--wp--preset--color--ground);
	background-image: var(--wp--custom--halftone);
	background-size: 14px 14px;
	-webkit-font-smoothing: antialiased;
}

:where(.wp-site-blocks) *:focus-visible {
	outline: 3px solid var(--wp--preset--color--cyan);
	outline-offset: 3px;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--yellow-ink);
}

/* Print grain over the whole page (the boards' texture): one fixed overlay, 12%, blend overlay. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .12;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* Sections touch: no block gap between header, main and footer, nor between the Home sections (the canvas has none). */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.op-home > * + * { margin-block-start: 0; }
main.op-home { margin-block: 0; }

/* ---------- Type roles ---------- */
/* Long words in big display sizes break rather than push the page sideways on phones. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin-block: 0; }
/* Stamped display headings: Power Yellow printed over a red-to-navy offset (Site Rules, Type board). H1, H2 and the Home hero title only. */
h1, h2, .is-style-stamp {
	color: var(--wp--preset--color--yellow);
	text-shadow: 1px 1px 0 #C8161E, 2px 2px 0 #C8161E, 3px 3px 0 #8E0E14, 4px 4px 0 #5A0A10, 5px 5px 0 #02125F, 6px 6px 0 #02125F, 0 18px 40px rgba(0, 0, 0, .65);
}
@media (max-width: 781px) {
	h1, h2, .is-style-stamp { text-shadow: 1px 1px 0 #C8161E, 2px 2px 0 #8E0E14, 3px 3px 0 #02125F, 4px 4px 0 #02125F, 0 12px 24px rgba(0, 0, 0, .6); }
}
.is-style-hero-title { font-size: var(--wp--preset--font-size--hero); }
.is-style-subline {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
}
@media (max-width: 781px) { .is-style-subline { font-size: 24px; } }
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block: 0 12px;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
}
.is-style-eyebrow::before {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	flex: none;
}
.is-style-muted { color: var(--wp--preset--color--muted); }

.is-style-chip {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid rgba(147, 166, 206, 0.30);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.is-style-chip.is-active { background: var(--wp--preset--color--yellow); border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); }

/* ---------- Surfaces: card stock ---------- */
.is-style-panel {
	background: linear-gradient(180deg, #132460 0%, var(--wp--preset--color--panel) 100%);
	border: 1px solid rgba(92, 225, 230, .18);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 30px -14px rgba(0, 0, 0, .8);
}
.is-style-panel-2 {
	background: linear-gradient(180deg, #16275F 0%, var(--wp--preset--color--panel-2) 100%);
	border: 1px solid var(--wp--custom--line--divider);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 22px -12px rgba(0, 0, 0, .7);
}
.is-style-section {
	border-top: 1px solid var(--wp--custom--line--divider);
}
/* The table: deep navy lit from below (hero moments, the Lazarus Chamber block). */
.is-style-table {
	background: radial-gradient(80% 70% at 50% 85%, #16296A 0%, #070F2C 55%, #040919 100%);
}
/* The studio sweep: product renders cut from white sit on it. */
.is-style-sweep {
	background: radial-gradient(90% 70% at 50% 38%, #FFFFFF 0%, #F1F4F9 45%, #DDE3ED 100%);
	color: var(--wp--preset--color--yellow-ink);
}
/* Section breaker: the booster crimp. Closes a full-bleed section and fades to black; the next section starts on black. No motion. */
.is-style-crimp { position: relative; }
.is-style-crimp::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	z-index: 5;
	pointer-events: none;
	border-top: 1px solid rgba(255, 255, 255, .22);
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 45%, #000 100%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 1.5px, rgba(255, 255, 255, .06) 1.5px 3px, rgba(0, 0, 0, .55) 3px 6.5px, rgba(0, 0, 0, .18) 6.5px 8px);
}
@media (max-width: 781px) { .is-style-crimp::after { height: 64px; } }
.is-style-on-black { background: #000; }

/* ---------- Images ---------- */
.wp-block-image.is-style-card img {
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--card);
}
/* Key art has the artist credit banner baked into its top edge: crop it off. */
.wp-block-image.is-style-key-art { overflow: hidden; }
.is-style-key-art img,
.wp-block-cover.is-style-key-art .wp-block-cover__image-background {
	object-fit: cover;
	object-position: 50% 100%;
	transform: scale(1.13);
	transform-origin: 50% 100%;
}

/* ---------- Buttons: die-cut tags on a printed base (Site Rules, Components board) ---------- */
.wp-block-button {
	filter: drop-shadow(0 4px 0 #A3121A) drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
	transition: filter 150ms cubic-bezier(.2, .8, .2, 1), transform 150ms cubic-bezier(.2, .8, .2, 1);
}
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	white-space: nowrap;
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	background: linear-gradient(180deg, #FFF6A0 0%, #F7EC52 22%, #F0E437 55%, #D8C31C 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(120, 90, 0, .35);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
	text-decoration: none;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: linear-gradient(180deg, #FFFAC4 0%, #FAF06A 25%, #F4E94A 60%, #E0CB24 100%);
}
.wp-block-button:active { transform: translateY(3px); filter: drop-shadow(0 1px 0 #A3121A) drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
/* Second button: navy face inside a 2 px Power Yellow edge, on a navy base. */
.wp-block-button.is-style-outline { filter: drop-shadow(0 4px 0 #01082E) drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 2px;
	background: var(--wp--preset--color--yellow);
	box-shadow: none;
	text-shadow: none;
	color: var(--wp--preset--color--yellow);
}
.wp-block-button.is-style-outline > .wp-block-button__link::before { content: none; }
.wp-block-button.is-style-outline > .wp-block-button__link > span,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-clip: padding-box;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background:
		linear-gradient(180deg, #1C3380 0%, #0E1D56 60%, #0A1646 100%) padding-box,
		var(--wp--preset--color--yellow) border-box;
	border: 2px solid transparent;
	padding: 0 26px;
	min-height: 52px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background:
		linear-gradient(180deg, #2A47A8 0%, #15296E 60%, #0E1D5C 100%) padding-box,
		var(--wp--preset--color--yellow) border-box;
	color: var(--wp--preset--color--yellow);
}
/* Compact buttons: the header only. */
.is-style-compact .wp-block-button__link { min-height: 44px; padding-left: 16px; padding-right: 16px; font-size: 19px; }
.is-style-compact.is-style-outline > .wp-block-button__link { padding-left: 14px; padding-right: 14px; }
/* Text link: Teko 19, cyan, with a hairline under it. */
.is-style-text-link a, a.is-style-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
	text-decoration: none;
	border-bottom: 2px solid rgba(92, 225, 230, .35);
}
@media (prefers-reduced-motion: reduce) { .wp-block-button { transition: none; } }
/* Links that leave the site carry an arrow. */
a.is-external::after,
.is-external > a::after { content: " \2197"; font-size: 0.85em; }

/* ---------- Header: 76 high, logo 54, menu items 44 high and 24 apart, plain drop-down lists ---------- */
.op-header {
	background: var(--wp--preset--color--ground);
	box-shadow: 0 1px 0 rgba(92, 225, 230, .2), 0 10px 30px rgba(0, 0, 0, .55);
	position: relative;
	z-index: 40;
}
.op-header__bar {
	min-height: 76px;
	gap: 28px; /* 23 Oct: 40 → 28, so the magnifier fits beside the full menu */
}
.op-header__logo img {
	display: block;
	width: auto;
	height: 54px;
}
.op-header .wp-block-navigation { gap: 18px; } /* 23 Oct: 24 → 18 */
.op-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content,
.op-header .wp-block-navigation > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.op-header .current-menu-item > .wp-block-navigation-item__content,
.op-header .current-menu-ancestor > .wp-block-navigation-item__content,
.op-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--yellow);
}
/* No submenu arrows: the label itself goes to the landing page; hover or focus opens the list. */
.op-header .wp-block-navigation__submenu-icon { display: none; }
/* The list: panel with the cyan hairline, at least 252 wide, from the header's bottom edge; links 44 high, Archivo 16, hairlines between. */
.op-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 252px;
	padding: 8px 0;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--custom--line--panel);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .8);
	transition: opacity 200ms cubic-bezier(.2, .8, .2, 1), transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.op-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--text);
	border-bottom: 1px solid var(--wp--custom--line--divider);
}
.op-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content { border-bottom: 0; }
.op-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--yellow); }
.op-header__cta { gap: 12px; } /* 23 Oct: 16 → 12 */
.op-header__cta .wp-block-button__link { font-size: 19px; }
/* Phone menu button: a full-size tap target. */
.op-header .wp-block-navigation__responsive-container-open,
.op-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--text);
}
/* Phone menu overlay. WordPress paints the open menu white with black text through a selector of five classes
   (.wp-block-navigation:not(.has-background) … .is-menu-open:not(.disable-default-overlay)); this one must outrank it. */
.op-header .op-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.op-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--text);
	padding: 0 16px 86px;
}
.op-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; }

/* ---------- Sticky header on every page (Mr Manager, 15 Oct 17:58: "always sticky on scroll ... always present on each page").
   Pinned to the top at full size. Phones: a thin pinned bar (logo, Find a game) and the tab bar, whose More opens the menu drawer.
   --op-head-h (global.js) is the pinned height, for anything else that sticks or scrolls to an anchor. ---------- */
.wp-block-template-part:has(> .op-header) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 90; }
html { scroll-padding-top: calc(var(--op-head-h, 0px) + 16px); }

/* Glass once you scroll (Mr Manager, 16 Oct: "It starts blue, then goes glass"; 01:50: "Blue Tint 75%"): the panel blue at 75% with the
   page blurred behind it (the store preview's effect, calmer). From 782 px up; phones keep the solid bar ("No glass bar on mobile"). */
@media (min-width: 782px) {
	.op-header { transition: background-color 250ms ease; }
	html.op-scrolled .op-header { background: rgba(11, 23, 64, .75); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%); }
}

/* ---------- The menu below 1100 px (inc/menu.php): More on phones, the menu button on tablets. One tile per section, one open at a time,
   links in two columns. It sits between the pinned header and the tab bar (phones) or the bottom edge (tablets). ---------- */
.opm[hidden] { display: none; }
.opm { position: fixed; left: 0; right: 0; top: var(--op-head-h, 0px); bottom: 70px; z-index: 85; overflow-y: auto; overscroll-behavior: contain;
	background: linear-gradient(180deg, rgba(4, 9, 25, 0) 0%, rgba(4, 9, 25, .92) 100%), linear-gradient(rgba(4, 9, 25, .9), rgba(4, 9, 25, .9)) center bottom / 100% 420px no-repeat,
		url("../images/footer-walkers.webp") center bottom / 640px auto no-repeat, radial-gradient(90% 60% at 50% 0%, #16296A 0%, #070F2C 60%, #040919 100%);
	background-color: #040919;
	box-shadow: inset 0 1px 0 var(--wp--custom--line--panel); animation: opm-in 200ms cubic-bezier(.2, .8, .2, 1); }
@keyframes opm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.opm__in { padding: 12px 16px 20px; }
.opm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.opm-sec { margin: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--wp--custom--line--divider);
	background-image: repeating-linear-gradient(135deg, rgba(92, 225, 230, .05) 0 1px, transparent 1px 10px), linear-gradient(180deg, #132460 0%, var(--wp--preset--color--panel) 100%); }
.opm-sec__row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin: 0; padding: 0 16px 0 13px; border: 0; border-left: 3px solid transparent; background: none;
	font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--text); text-align: left; text-decoration: none; cursor: pointer; }
.opm-sec__row:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: -2px; }
.opm-sec__chev { width: 10px; height: 10px; margin: 0 4px 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); color: var(--wp--preset--color--dim); transition: transform 150ms ease; }
.opm-sec__go { width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); color: var(--wp--preset--color--dim); }
.opm-sec.is-open { border-color: rgba(240, 228, 55, .35); }
.opm-sec.is-open .opm-sec__row { border-left-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); }
.opm-sec.is-open .opm-sec__chev { margin-bottom: -4px; transform: rotate(-135deg); color: var(--wp--preset--color--yellow); }
.opm-sec__panel { padding: 0 12px 12px; }
/* The section's own page as the first tile, full width, lit */
.opm-over { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 8px 14px; border: 1px solid rgba(92, 225, 230, .45); border-left: 3px solid var(--wp--preset--color--cyan); border-radius: 2px; background: rgba(92, 225, 230, .08);
	font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--cyan); text-decoration: none; }
.opm-over::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.opm-sec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.opm-link { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--wp--custom--line--divider); border-radius: 2px; background: rgba(6, 12, 36, .55); font-size: 15px; line-height: 1.25; color: var(--wp--preset--color--text); text-decoration: none; }
.opm-link:active, .opm-link:focus-visible { border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); }
.opm-sec__sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 6px; margin: 12px 0 4px; }
.opm-sec__setsl { grid-column: 1 / -1; margin: 0 0 -2px 4px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.opm-set { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 10px; text-align: center; line-height: 1.05; border: 0; border-radius: 0; background: var(--wp--preset--color--yellow); box-shadow: 0 3px 0 #C8161E; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--yellow-ink); text-decoration: none; }
.opm-set:active { transform: translateY(2px); box-shadow: 0 1px 0 #C8161E; }
.opm-set--logo { flex-direction: column; gap: 0; padding: 0; background: var(--wp--preset--color--panel-2); box-shadow: none; border: 1px solid var(--wp--custom--line--divider); overflow: hidden; }
.opm-set--logo:active { transform: none; box-shadow: none; }
.opm-set__logo { display: block; width: auto; height: 78px; max-width: 100%; margin: 12px 8px 8px; object-fit: contain; }
.opm-set__bar { display: block; width: 100%; padding: 6px 8px 4px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); font-size: 11px; letter-spacing: .18em; }
.opm__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; }
.opm__discord { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 2px solid var(--wp--preset--color--yellow); border-radius: 0; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--yellow); text-decoration: none; background: rgba(6, 12, 36, .6); }
.opm__social { display: flex; gap: 24px; margin: 0; }
.opm__social a { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); text-decoration: none; }
html.op-menu-open { overflow: hidden; }
html.op-menu-open .op-tabbar .op-tab-more .wp-block-navigation-item__content { color: var(--wp--preset--color--yellow); }
html.op-menu-open .op-tab-more { --op-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
@media (min-width: 782px) { .opm { bottom: 0; background: radial-gradient(90% 60% at 50% 0%, #16296A 0%, #070F2C 60%, #040919 100%); } .opm__in { max-width: 640px; margin: 0 auto; } }
@media (min-width: 782px) { .opm { display: none !important; } } /* 23 Oct: the drawer is the phone menu only; tablets keep the header menu with More */
@media (prefers-reduced-motion: reduce) { .opm { animation: none; } }

/* Join the community: the standard block global-join; its styles moved to blocks.css (25 Oct). */

/* ---------- Footer: #040919, cyan hairline on top; six columns that follow the header's menus ---------- */
.op-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--deep);
	border-top: 1px solid var(--wp--custom--line--panel);
}
/* The Walkers, black and white (the Power Card Station print art), behind the footer; a deep-navy wash keeps the links readable. */
.op-footer::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../images/footer-walkers.webp) 50% 22% / cover no-repeat; }
.op-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 9, 25, .9) 0%, rgba(4, 9, 25, .8) 45%, rgba(4, 9, 25, .88) 100%); }
.op-footer h2 {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--text);
	text-shadow: none;
	margin-block: 0 8px;
}
.op-footer__columns { display: flex; gap: 24px; }
.op-footer__links { flex: 1 1 0; min-width: 0; }
.op-footer__links p { margin: 0; }
.op-footer__links a {
	display: block;
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.op-footer__links a:hover { color: var(--wp--preset--color--text); }
.op-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 14px; color: var(--wp--preset--color--dim); border-top: 1px solid var(--wp--custom--line--divider); } /* the row is plain HTML from inc/legal.php (25 Oct), so its flex layout is set here, not by the group block */
.op-footer__legal .op-footer__copy { flex-basis: 100%; }
.op-footer__legal p { margin: 0; }
.op-footer__legal a { font-size: 14px; color: var(--wp--preset--color--dim); text-decoration: none; }
.op-footer__legal a:hover { color: var(--wp--preset--color--text); }
@media (max-width: 781px) {
	/* Phone: the menus as rows 48 high, closed until tapped; legal links 2-up at 44 high. */
	.op-footer__columns { flex-direction: column; gap: 0; }
	.op-footer__links h2 { margin: 0; }
	.op-footer__links details { border-bottom: 1px solid var(--wp--custom--line--divider); }
	.op-footer__links summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; }
	.op-footer__links summary::-webkit-details-marker { display: none; }
	.op-footer__links summary::after { content: "\2304"; color: var(--wp--preset--color--muted); }
	.op-footer__links details[open] summary::after { content: "\2303"; }
	.op-footer__links a { display: flex; align-items: center; min-height: 44px; padding: 0 0 0 16px; }
	.op-footer__legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
	.op-footer__legal a { display: flex; align-items: center; min-height: 44px; }
	.op-footer__legal .op-footer__copy { grid-column: span 2; padding-top: 12px; }
}
@media (min-width: 782px) {
	.op-footer__links details { display: contents; }
	/* News and Contact share the last column: room between them so they read as two lists */
	.op-footer__links details + details summary { margin-top: 40px; }
	.op-footer__links summary { list-style: none; pointer-events: none; }
	.op-footer__links summary::-webkit-details-marker { display: none; }
}

/* ---------- Phone tab bar (the app's tab bar) ---------- */
.op-tabbar { display: none; }

/* 23 Oct (Mr Manager): no drawer button on tablets. From 782 px the header menu stays and hands sections to More (global.js);
   below 782 the phone header and the tab bar take over, as before. */
@media (max-width: 781px) {
	.op-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.op-header__cta .op-header__shop { display: none; }
	.op-header__bar { min-height: 60px; gap: 12px; }
	.op-header__logo img { height: 40px; }
	.op-header__cta .wp-block-button__link { min-height: 44px; padding: 0 12px; font-size: 19px; }
	/* Drawer: menu rows 56 (Teko 24), links 48 (Archivo 16) indented 16; one menu open at a time. */
	.op-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.op-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		min-height: 56px;
		font-size: 24px;
		border-bottom: 1px solid var(--wp--custom--line--divider);
	}
	.op-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
	.op-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 48px;
		padding-left: 16px;
	}

	/* Phone top: the header as it is (logo 40, Find a game), pinned (Mr Manager, 16 Oct: "Keep A1"); More opens the menu */
	.op-header .wp-block-navigation__responsive-container-open { display: none; }

	body { padding-bottom: 70px; }
	.op-tabbar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80; /* above the sticky On this page bar (60), which otherwise paints over it when it sits low in the viewport (27 Oct); under the drawer (85) and the header (90) */
		height: 70px;
		background: var(--wp--preset--color--deep);
		border-top: 1px solid var(--wp--custom--line--panel);
	}
	.op-tabbar .wp-block-navigation__container {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 70px;
		margin: 0;
		padding: 0;
		list-style: none;
		justify-content: space-around;
		align-items: center;
		gap: 0;
	}
	.op-tabbar .wp-block-navigation-item {
		flex: 1;
		display: flex;
		justify-content: center;
	}
	.op-tabbar .wp-block-navigation-item__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 60px;
		min-height: 48px;
		font-family: var(--wp--preset--font-family--label);
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--muted);
		text-decoration: none;
	}
	.op-tabbar .wp-block-navigation-item__content::before {
		content: "";
		width: 24px;
		height: 24px;
		background: currentColor;
		-webkit-mask: var(--op-tab-icon) center / contain no-repeat;
		mask: var(--op-tab-icon) center / contain no-repeat;
	}
	.op-tabbar .current-menu-item > .wp-block-navigation-item__content,
	.op-tabbar .wp-block-navigation-item__content[aria-current="page"] {
		color: var(--wp--preset--color--yellow);
	}
	/* Play Network on phones (27 Oct): the Play tab stays "Play", on a yellow tile with the red stroke. The tile fills its whole cell,
	   top to bottom of the bar, like the header's Find a Game button (Mr Manager, 27 Oct 11:30). */
	.op-tabbar .op-tab-play { align-self: stretch; }
	.op-tabbar .op-tab-play > .wp-block-navigation-item__content { width: 100%; height: 70px; padding: 0 6px; background: var(--wp--preset--color--yellow); box-shadow: inset 0 -4px 0 #A3121A; color: var(--wp--preset--color--yellow-ink) !important; }
}

/* Tab icons: stroke icons from SANDBOX 03, used as masks so they take the text colour. */
/* The tab icons are the game's own card icons (Mr Manager, 16 Oct): Home = Astral Plane, Learn = Defensive (shield), Play = Offensive (swords),
   Shop = First (1st). Library 06_Web_Exports/OverPower Website Archive/02_Media_Uploads/2024/10/OverPower_*.png, trimmed to 96 px (assets/images/icons/). */
.op-tab-home  { --op-tab-icon: url("../images/icons/tab-astral-plane.png"); }
.op-tab-learn { --op-tab-icon: url("../images/icons/tab-defensive.png"); }
.op-tab-cards { --op-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='15' rx='1'/%3E%3Cpath d='M9 21h10V7'/%3E%3C/svg%3E"); }
.op-tab-play  { --op-tab-icon: url("../images/icons/tab-offensive.png"); }
.op-tab-more  { --op-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }
.op-tab-shop  { --op-tab-icon: url("../images/icons/tab-first.png"); }

/* ---------- Shared page components: the section frame, section heads, panels and tiles as Home built them (moved here from home.css on 14 Oct 2026 so every template uses one set) ---------- */
.oph-wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
@media (min-width: 782px) { .oph-wrap { width: min(1080px, 100% - 80px); } }
.oph-sec { padding-block: var(--wp--preset--spacing--50); }
.oph-sec--line { border-top: 1px solid var(--wp--custom--line--divider); }
.oph-center { text-align: center; }
.oph-center .is-style-eyebrow { justify-content: center; }
.oph-h2 { margin-block: 0 12px; }
.oph-h3 { font-size: 30px; line-height: .9; color: var(--wp--preset--color--text); text-shadow: none; margin-block: 0 16px; }
.oph-small { font-size: var(--wp--preset--font-size--small); line-height: 1.5; margin: 0; }
.oph-caption { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--dim); margin: 12px 0 0; }
.oph-labs { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 12px; }
.oph-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.oph-sechead .oph-h2 { margin-bottom: 0; }
.oph-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.oph-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.oph-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.oph-split { display: grid; grid-template-columns: 5fr 7fr; column-gap: 24px; align-items: center; }
.oph-split__copy { display: flex; flex-direction: column; }
.oph-split__copy .is-style-subline { margin: 12px 0 16px; }
/* Hand-written button rows (theme templates) have no layout class: lay them out like the block's flex row, with room between buttons (15 Oct). */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.oph-split__copy .wp-block-buttons { margin-top: 24px; }
@media (min-width: 782px) { .oph-split__copy .wp-block-buttons { flex-wrap: nowrap; } }
.oph-panel { padding: 24px; display: flex; flex-direction: column; }
.oph-panel--big { padding: 32px 40px; min-height: 0; }
.oph-push { margin-top: auto; padding-top: 16px; }
.oph-inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.oph-inline .is-style-text-link { white-space: nowrap; }
.oph-inline .wp-block-button { margin: 0; }
.oph-tile { padding: 24px; align-items: center; text-align: center; gap: 0; }
/* tile titles: Teko, centred, up to two lines (Mr Manager, 1 Oct): Niagara did not read at this size */
.oph-tt { margin: 0 0 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: .02em; text-transform: none; color: var(--wp--preset--color--text); text-shadow: none; }
.oph-tt__2 { font-size: 20px; white-space: nowrap; font-weight: 500; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) { .oph-tt { font-size: 22px; } .oph-tt__2 { font-size: 15px; } }
.oph-tile__visual { height: 150px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.oph-cardtile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--wp--preset--color--text); }
.oph-cardtile__img { position: relative; display: block; text-decoration: none; }
.oph-cardtile img { display: block; width: 100%; height: auto; aspect-ratio: 440 / 315; object-fit: cover; border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--card, 0 14px 24px rgba(0,0,0,.5)); }
.oph-cardtile__name { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 16px; color: var(--wp--preset--color--text); text-decoration: none; margin-top: 4px; }
.oph-cardtile__cap { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--dim); }
.op-tbc { background: #EA3024; color: #FFFFFF; padding: 0 6px; border-radius: 2px; font-style: normal; font-weight: 600; }
.op-tbc::before { content: none; }
@media (max-width: 781px) {
	.oph-sec { padding-block: 40px; }
	.oph-h3 { font-size: 24px; }
	.oph-sechead { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
	.oph-grid4, .oph-grid3, .oph-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.oph-grid3, .oph-grid2 { grid-template-columns: 1fr; }
	.oph-split { grid-template-columns: 1fr; row-gap: 24px; }
	.oph-panel { padding: 16px; }
	.oph-panel--big { padding: 16px; min-height: 0; }
	.oph-tile { padding: 16px; }
	.oph-tile__visual { height: 96px; }
}

/* Global section 5, Card Library: the standard block global-card-library; its styles moved to blocks.css (25 Oct). */

/* ---------- Card tiles and rows ---------- */
.op-card-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.op-card-row.is-portrait { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 781px) {
	/* Phone: 2-up grids, nothing scrolls sideways (Mr Manager, 28 Sep). */
	.op-card-row, .op-card-row.is-portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.op-foil-tag {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 4px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--yellow-ink);
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Header layout: the menu takes the free space after the logo. */
.op-header__bar > .wp-block-navigation { flex: 1 1 0; min-width: 0; }
@media (max-width: 781px) {
	.op-header__bar > .op-header__end { order: 2; margin-left: auto; gap: 12px; }
	.op-header__bar > .op-search-btn { order: 2; margin-left: auto; }
	.op-header__bar > .op-header__cta { order: 3; }
	.op-header__bar > .wp-block-navigation { order: 4; flex: 0 0 auto; }
}


/* ---------- More and site search in the header (Mr Manager, 23 Oct 17:51; inc/search.php, global.js) ---------- */
/* A section the bar can't hold leaves for More, in the order Contact, News, Resources, Events, Cards, Shop, Play, Learn. */
.op-header .op-nav-off { display: none !important; }
.op-header__cta .op-nav-off { display: none !important; }
.op-nav-more__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--text); white-space: nowrap; }
.op-nav-more__btn::after { content: ""; width: 7px; height: 7px; margin: 0 2px 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 150ms ease; }
.op-nav-more__btn:hover, .op-nav-more__btn[aria-expanded="true"] { color: var(--wp--preset--color--yellow); }
.op-nav-more__btn[aria-expanded="true"]::after { margin-bottom: -4px; transform: rotate(-135deg); }
.op-nav-more__btn:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
/* More's panel: the phone menu's tiles, only the sections that left the bar */
.opm-more { position: absolute; top: 100%; right: 0; z-index: 45; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - var(--op-head-h, 76px) - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 12px;
	background: radial-gradient(90% 60% at 50% 0%, #16296A 0%, #070F2C 60%, #040919 100%); background-color: #040919; border: 1px solid var(--wp--custom--line--panel); border-radius: 0 0 4px 4px;
	box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .9); animation: opm-in 200ms cubic-bezier(.2, .8, .2, 1); }
.opm-more[hidden] { display: none; }
@media (max-width: 781px) { .opm-more { display: none !important; } }

/* The magnifier: always in the header */
.op-search-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -16px 0 0; padding: 0; border: 1px solid rgba(147, 166, 206, .35); border-radius: 2px; background: transparent; color: var(--wp--preset--color--text); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.op-search-btn:hover, .op-search-btn[aria-expanded="true"] { color: var(--wp--preset--color--yellow); border-color: var(--wp--preset--color--yellow); }
.op-search-btn:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.op-search-btn svg { display: block; width: 22px; height: 22px; }
@media (max-width: 781px) { .op-search-btn { margin: 0; } }

/* The search panel: under the pinned header; on phones it fills the space between the header and the tab bar */
.opss { position: fixed; left: 0; right: 0; top: var(--op-head-h, 76px); bottom: 0; z-index: 89; padding: 16px; background: rgba(4, 9, 25, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.opss[hidden] { display: none; }
html.op-search-open { overflow: hidden; }
.opss__box { max-width: 720px; max-height: 100%; margin: 0 auto; display: flex; flex-direction: column; background: var(--wp--preset--color--panel); border: 1px solid var(--wp--custom--line--panel); border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); animation: opm-in 180ms cubic-bezier(.2, .8, .2, 1); }
.opss__field { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--wp--custom--line--panel); }
.opss__field svg { flex: none; width: 22px; height: 22px; color: var(--wp--preset--color--muted); }
.opss__input { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--wp--preset--color--text); font-family: var(--wp--preset--font-family--body); font-size: 20px; line-height: 1.2; outline: none; -webkit-appearance: none; appearance: none; }
.opss__input::placeholder { color: var(--wp--preset--color--dim); }
.opss__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.opss__close { flex: none; min-height: 36px; padding: 0 10px; border: 1px solid var(--wp--custom--line--panel); border-radius: 2px; background: var(--wp--preset--color--deep); color: var(--wp--preset--color--muted); cursor: pointer;
	font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.opss__close:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.opss__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 10px; }
.opss__grp { display: flex; justify-content: space-between; margin: 10px 0 2px; padding: 0 16px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.opss__grp span { color: var(--wp--preset--color--dim); font-variant-numeric: tabular-nums; }
.opss__list { list-style: none; margin: 0; padding: 0; }
.opss__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 8px 16px 8px 13px; border-left: 3px solid transparent; color: var(--wp--preset--color--text); text-decoration: none; }
.opss__t { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.opss__p { grid-column: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--wp--preset--color--muted); }
.opss__go { grid-row: 1 / span 2; grid-column: 2; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--dim); }
.opss__r mark { background: none; color: var(--wp--preset--color--yellow); }
.opss__r.is-sel, .opss__r:hover { background: rgba(92, 225, 230, .07); border-left-color: var(--wp--preset--color--yellow); }
.opss__r.is-sel .opss__go, .opss__r:hover .opss__go { color: var(--wp--preset--color--yellow); }
.opss__msg { margin: 0; padding: 18px 16px 8px; color: var(--wp--preset--color--muted); }
.opss__msg b { color: var(--wp--preset--color--text); }
.opss__help { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 8px; }
.opss__help a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--wp--custom--line--panel); border-radius: 2px; color: var(--wp--preset--color--cyan); text-decoration: none;
	font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.opss__foot { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--wp--custom--line--divider); font-size: 13px; color: var(--wp--preset--color--dim); }
.opss__foot kbd { padding: 1px 6px; border: 1px solid var(--wp--custom--line--panel); border-radius: 2px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
	.opss { bottom: 70px; padding: 0; background: var(--wp--preset--color--deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.opss__box { max-width: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
	.opss__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .opm-more, .opss__box { animation: none; } }


/* ==================== Mega menus (Mr Manager, 23 Oct 18:32; built 21:14; inc/menu.php, global.js) ====================
   Every header section opens a full-width panel under the pinned header: tidy link groups on the left, one promo on the right.
   Order: News · Learn · Play · Cards · Events · Resources · Contact. Canvas "OverPower Web – Mega menus" v9. */

/* Shop and Find a game a size smaller on desktop (38 high, were 44); the magnifier matches */
@media (min-width: 782px) {
	.op-header__cta .wp-block-button > .wp-block-button__link { min-height: 38px; padding: 0 12px; font-size: 17px; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
	.op-header__cta .wp-block-button.is-style-outline > .wp-block-button__link { min-height: 38px; padding: 0 11px; }
	.op-header__cta .wp-block-button { filter: drop-shadow(0 3px 0 #A3121A) drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
	.op-header__cta .wp-block-button.is-style-outline { filter: drop-shadow(0 3px 0 #01082E) drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
	.op-header .op-search-btn { width: 38px; height: 38px; }
}

/* The top row: the label links to the section; the open (or current) section is lit, the open one with a yellow bar on the header's edge */
.op-header__bar > .op-header__nav { flex: 1 1 0; min-width: 0; }
.op-header__end { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
@media (min-width: 782px) {
	/* 27 Oct (Mr Manager): the bar runs the full window width (no 1080 column); the logo and the right-hand group share the free space
	   equally, so the menu sits in the middle of the window; when space runs short the menu shrinks and hands sections to More. */
	.op-header > .op-header__bar { max-width: none !important; }
	.op-header__bar > .op-header__logo { flex: 1 1 0; min-width: max-content; margin: 0; }
	.op-header__bar > .op-header__end { flex: 1 1 0; min-width: max-content; }
	.op-header__bar > .op-header__nav { flex: 0 1 auto; }
	.opx { justify-content: center; }
	/* The logo grows with the window (54 px at 1100, about 110 on big screens) and hangs below the bar when it is taller than it */
	/* 27 Oct, 03:27 (Mr Manager): the logo is always on top of everything, so the open menu panel (z 44), its dim layer (43) and the
	   More panel (45) never cut it in half; and it sits a little further in from the left edge (about 23 px more at 1440) */
	.op-header__logo { position: relative; z-index: 50; align-self: flex-start; }
	.op-header__bar > .op-header__logo { padding-left: clamp(8px, calc(2vw - 6px), 32px); }
	/* 27 Oct, 20:24 (Mr Manager): the logo's link covers the logo inside the bar only, never the empty half of the header beside it
	   (it was as wide as that half, 310 to 550 px); the part of the logo that hangs below the bar lets clicks through, so the sticky
	   On this page bar and the page under it stay clickable. No focus box on a mouse click (the keyboard still gets it). */
	.op-header__logo a { display: block; width: max-content; height: min(var(--op-logo-h), 65px); }
	.op-header__logo a:focus:not(:focus-visible) { outline: none; }
	.op-header__logo img { height: var(--op-logo-h) !important; margin: 11px 0 calc(65px - var(--op-logo-h)); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); pointer-events: none; }
	/* 31 Oct, 02:33 (Mr Manager): the hanging logo covered text. At the top of a page it hangs only as far as the page's first line of
	   text under it allows (global.js measures it and sets --op-logo-cap, 8 px clear; never below the bar size); once the page moves
	   (html.op-logo-sm, 4 px) it eases to 60 px, centred inside the 76 px bar, and back at the top. The layout box never changes (76 px),
	   so nothing on the page moves; the open menu panel's top room follows the variable. Transitions start after the first measure, so a
	   page never animates on load; Reduce Motion: no easing. */
	.op-header { --op-logo-h: clamp(54px, min(calc(13vw - 80px), var(--op-logo-cap, 112px)), 112px); }
	html.op-logo-sm .op-header { --op-logo-h: clamp(54px, calc(13vw - 80px), 60px); }
	html.op-logo-sm .op-header__logo img { margin: calc((76px - var(--op-logo-h)) / 2) 0; }
	.op-header.op-logo-ready .op-header__logo img { transition: height 280ms cubic-bezier(.22, 1, .36, 1), margin 280ms cubic-bezier(.22, 1, .36, 1); }
	.op-header.op-logo-ready .op-header__logo a { transition: height 280ms cubic-bezier(.22, 1, .36, 1); }
}
@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
	.op-header.op-logo-ready .op-header__logo img, .op-header.op-logo-ready .op-header__logo a { transition: none; }
}
/* Play Network (27 Oct 00:24): a solid yellow tab from the top of the bar to its bottom, the buttons' red stroke along its foot;
   PLAY on the line with the other labels, NETWORK small under it; the open or current state is a blue line, not a yellow one. */
.opx__it--tab { margin: 0 2px; }
.opx .opx__it--tab .opx__top, .opx .opx__it--tab .opx__top:hover, .opx .opx__it--tab.is-open .opx__top, .opx .opx__it--tab.is-current .opx__top { padding: 0 16px; background: var(--wp--preset--color--yellow); box-shadow: inset 0 -3px 0 #A3121A; color: var(--wp--preset--color--yellow-ink); }
.opx__tab { position: relative; display: inline-block; }
.opx__tab small { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font-size: 10px; line-height: 1; letter-spacing: .22em; font-weight: 700; }
.opx-bar.is-tab { background: #1E5BFF; }
/* Below 1280 the gaps tighten so all seven sections stay on the bar down to about 1100 px */
@media (min-width: 782px) and (max-width: 1279px) { .op-header .opx { gap: 11px; } .op-header__bar { gap: 20px; } .op-header__end { gap: 22px; } .opx .opx__it--tab .opx__top { padding: 0 12px; } }
.opx { display: flex; align-items: center; gap: 16px; /* 26 Oct: 18 → 16, so the longer "Expansions" label keeps all seven sections on the bar from 1100 px */ margin: 0; padding: 0; list-style: none; }
.opx__it { flex: none; }
.opx__top { position: relative; display: inline-flex; align-items: center; min-height: 76px; padding: 0;
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: clamp(14.082px, 0.88rem + ((1vw - 3.2px) * 0.618), 21px); /* the old menu's fluid size: 21 from 1440 */
	line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--text); text-decoration: none; white-space: nowrap; }
.opx__top { transition: color 200ms ease; }
.opx__it.is-open .opx__top, .opx__it.is-current .opx__top, .opx__top:hover { color: var(--wp--preset--color--yellow); }
/* One yellow bar under the open label, on the header's bottom edge: it slides from label to label (global.js sets its place and width) */
.op-header__nav { position: relative; }
.opx-bar { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--wp--preset--color--yellow); opacity: 0; pointer-events: none;
	transform: translateX(var(--x, 0)); transition: transform 340ms cubic-bezier(.22, 1, .36, 1), width 340ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease; }
.opx-bar.is-on { opacity: 1; }
.opx-bar.is-jump { transition: opacity 200ms ease; }
.opx__top:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: -2px; }

/* The shell: full width under the header. It drops in once and stays open while the mouse moves between sections; its height eases
   from one section's panel to the next, and the panels cross-fade inside it, sliding in from the side the mouse is moving to. */
.opx-shell { box-sizing: border-box; position: absolute; left: 0; right: 0; top: 100%; z-index: 44; max-height: calc(100vh - var(--op-head-h, 76px)); overflow: hidden auto; overscroll-behavior: contain;
	background-image: repeating-linear-gradient(135deg, rgba(92, 225, 230, .035) 0 1px, transparent 1px 12px), linear-gradient(180deg, #0F1E52 0%, var(--wp--preset--color--panel) 55%, #08133A 100%);
	border-top: 1px solid var(--wp--custom--line--panel); border-bottom: 1px solid var(--wp--custom--line--panel); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9);
	visibility: hidden; opacity: 0; transform: translateY(-10px);
	transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), height 340ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms; }
.opx-shell.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.opx-shell.is-sizing { overflow: hidden; }
/* The header is a constrained group: its children get a max width and margins; the shell and the dim layer span the window */
.op-header > .opx-shell, .op-header > .opx-dim { max-width: none !important; margin: 0 !important; }
.opx-panel { position: absolute; left: 0; right: 0; top: 0; padding: 16px clamp(16px, 4vw, 40px) 18px; visibility: hidden; opacity: 0; pointer-events: none; }
/* 27 Oct: from about 1100 to 1660 px the logo hangs over the left of the panel's links; the panel starts below its tip there */
@media (min-width: 1100px) and (max-width: 1659px) { .opx-panel { padding-top: max(16px, calc(var(--op-logo-h) - 49px)); } }
.opx-panel.is-on { position: relative; visibility: visible; opacity: 1; pointer-events: auto; }
.opx-panel.is-on.is-enter > .opx-panel__in { animation: opx-enter 360ms cubic-bezier(.22, 1, .36, 1) both; }
.opx-panel.is-leave { visibility: visible; opacity: 1; }
.opx-panel.is-leave > .opx-panel__in { animation: opx-leave 220ms ease both; }
@keyframes opx-enter { from { opacity: 0; transform: translateX(var(--dx, 0)); } to { opacity: 1; transform: none; } }
@keyframes opx-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(var(--dx, 0px) * -1)); } }
.opx-panel__in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; align-items: start; }
.opx-panel__main { min-width: 0; padding-top: 2px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.opx-panel.is-news .opx-panel__main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* Link groups */
.opx-grp { min-width: 0; }
.opx-grp__h { margin: 0 0 4px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.opx-grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.opx-l { display: grid; gap: 0; padding: 4px 10px 4px 12px; margin: 0 -10px 0 -12px; border-left: 2px solid transparent; border-radius: 2px; color: var(--wp--preset--color--text); text-decoration: none; }
.opx-l:hover, .opx-l:focus-visible { background: rgba(92, 225, 230, .07); border-left-color: var(--wp--preset--color--yellow); outline: none; }
.opx-l:hover .opx-l__t, .opx-l:focus-visible .opx-l__t { color: var(--wp--preset--color--yellow); }
.opx-l__t { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 16px; line-height: 1.25; }
.opx-l__d { font-size: 13px; line-height: 1.3; color: var(--wp--preset--color--muted); }
.opx-l.is-ext .opx-l__t::after { content: " \2197"; font-size: .85em; color: var(--wp--preset--color--muted); }

/* Set buttons (Cards): a small "Set" over the full name */
.opx-sets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
/* Group placement (26 Oct 15:04): a group pinned to a column (opx-grp--c1, --c2), or across both with its links side by side (--wide);
   dense placement lets a right-column group rise to the first row. The set buttons can lead the panel (opx-sets--top). */
.opx-panel__main { grid-auto-flow: row dense; }
.opx-grp--c1 { grid-column: 1; }
.opx-grp--c2 { grid-column: 2; }
.opx-grp--wide { grid-column: 1 / -1; }
.opx-grp--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.opx-sets--top { margin: 0 0 10px; }
.opx-set { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 38px; padding: 4px 10px; text-align: center; line-height: 1.05; background: var(--wp--preset--color--yellow); box-shadow: 0 3px 0 #C8161E; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--yellow-ink); text-decoration: none; }
.opx-set:hover, .opx-set:focus-visible { filter: brightness(1.08); }
/* A set button with the set's logo (26 Oct): the lockup large on the panel's dark ground, "Expansion" in a yellow bar along the bottom, no other text (the name is read out) */
.opx-set--logo { gap: 0; padding: 0; background: var(--wp--preset--color--panel-2); box-shadow: none; border: 1px solid var(--wp--custom--line--divider); overflow: hidden; }
.opx-set--logo:hover, .opx-set--logo:focus-visible { filter: none; background: var(--wp--preset--color--panel); border-color: rgba(240, 228, 55, .6); }
.opx-set__logo { display: block; width: auto; height: 118px; max-width: 100%; margin: 14px 12px 10px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.opx-set__bar { display: block; width: 100%; padding: 6px 10px 4px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); font-size: 12px; letter-spacing: .18em; }
.opx-set--logo:hover .opx-set__bar { filter: brightness(1.08); }
.opx-set small, .opm-set small { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.opm-set { flex-direction: column; gap: 2px; padding: 4px 10px; }

/* News: the newest posts as small cards */
.opx-news { display: grid; gap: 4px; }
.opx-post { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 8px; margin: 0 -8px; border-radius: 2px; color: var(--wp--preset--color--text); text-decoration: none; }
.opx-post:hover, .opx-post:focus-visible { background: rgba(92, 225, 230, .07); outline: none; }
.opx-post:hover .opx-post__t, .opx-post:focus-visible .opx-post__t { color: var(--wp--preset--color--yellow); }
.opx-post__img { display: block; width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; border: 1px solid var(--wp--custom--line--divider); background: var(--wp--preset--color--deep); }
.opx-post__cat { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 2px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c, #EA3024); }
.opx-post__t { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.opx-post__m { display: block; margin-top: 4px; font-size: 13px; color: var(--wp--preset--color--muted); }

/* The promo card */
.opx-promo { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(240, 228, 55, .45); border-radius: 4px; background: var(--wp--preset--color--deep); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); color: var(--wp--preset--color--text); text-decoration: none; }
.opx-promo:hover, .opx-promo:focus-visible { border-color: var(--wp--preset--color--yellow); outline: none; }
.opx-promo__art { position: relative; min-height: 150px; overflow: hidden; background: radial-gradient(80% 120% at 50% 100%, #1B2E78 0%, #0B1740 60%, #060C24 100%); }
.opx-promo__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opx-promo__art > img.is-contain { object-fit: contain; padding: 18px 24px; box-sizing: border-box; }
/* The Learn to Play mat, turned upright so Invincible stands up */
.opx-promo__art > img.is-rot { inset: auto; left: 50%; top: 50%; width: 202px; height: 236px; transform: translate(-50%, calc(-50% + 22px)) rotate(90deg); }
.opx-promo__tag { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 4px 9px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.opx-promo__body { display: grid; align-content: center; gap: 6px; padding: 12px 14px; }
.opx-promo__t { margin: 0; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.opx-promo__p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opx-promo__btn { justify-self: start; margin-top: 2px; filter: drop-shadow(0 3px 0 #A3121A) drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.opx-promo__btn span { display: inline-flex; align-items: center; white-space: nowrap; /* one line on every system font (Mr Manager, 26 Oct: the arrow wrapped on his Mac) */ min-height: 36px; padding: 0 14px; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
	background: linear-gradient(180deg, #FFF6A0 0%, #F7EC52 22%, #F0E437 55%, #D8C31C 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(120, 90, 0, .35);
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 17px; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--yellow-ink); }

/* A fan of three booster packs (the retailer promo), no shade over them */
.opx-promo-fan, .opm-promo-fan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.opx-promo-fan img, .opm-promo-fan img { position: absolute; top: 50%; left: 50%; width: auto; height: 116px; transform-origin: 50% 90%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.opx-promo-fan img:nth-child(1), .opm-promo-fan img:nth-child(1) { transform: translate(-50%, -48%) translateX(-35px) rotate(-14deg); }
.opx-promo-fan img:nth-child(2), .opm-promo-fan img:nth-child(2) { transform: translate(-50%, -54%); z-index: 1; }
.opx-promo-fan img:nth-child(3), .opm-promo-fan img:nth-child(3) { transform: translate(-50%, -48%) translateX(35px) rotate(14deg); }

/* The page behind an open panel dims */
.opx-dim { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 43; background: rgba(4, 9, 25, .6);
	visibility: hidden; opacity: 0; transition: opacity 260ms ease, visibility 0s linear 260ms; }
.opx-dim.is-on { visibility: visible; opacity: 1; transition-delay: 0s; }

/* Tablets: the promo goes under the links */
@media (max-width: 1099px) {
	.opx-panel__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.opx-promo { max-width: 560px; }
}

/* Phones: the phone header and the tab bar's menu; each open tile ends with its section's promo */
@media (max-width: 781px) { .op-header__nav, .opx-shell, .opx-dim { display: none !important; } }
.opm-promo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid rgba(240, 228, 55, .45); border-radius: 4px; background: var(--wp--preset--color--deep); color: var(--wp--preset--color--text); text-decoration: none; }
.opm-promo__tag { display: inline-block; margin-bottom: 4px; padding: 2px 6px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 13px; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; }
.opm-promo__t { display: block; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.opm-promo__m { display: block; margin-top: 3px; font-size: 13px; color: var(--wp--preset--color--muted); }
.opm-promo__art { position: relative; display: block; width: 112px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: radial-gradient(80% 120% at 50% 100%, #1B2E78 0%, #0B1740 60%, #060C24 100%); }
.opm-promo__art > img { width: 100%; height: 100%; object-fit: cover; }
.opm-promo__art > img.is-contain { object-fit: contain; padding: 6px; box-sizing: border-box; }
.opm-promo-fan img { height: 66px; }
.opm-promo-fan img:nth-child(1) { transform: translate(-50%, -42%) translateX(-28px) rotate(-14deg); }
.opm-promo-fan img:nth-child(3) { transform: translate(-50%, -42%) translateX(28px) rotate(14deg); }
.opm-promo__art > img.is-rot { position: absolute; left: 50%; top: 50%; width: 96px; height: 112px; transform: translate(-50%, calc(-50% + 8px)) rotate(90deg); }

/* The Lazarus Chamber's links that are not live yet (12 Nov, launch; global.js adds the class and the tag). */
a.op-soon { cursor: default; opacity: .7; }
a.op-soon:hover { text-decoration: none; }
.op-soon__tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--wp--preset--color--yellow); color: #0b1740; font-family: var(--wp--preset--font-family--label); font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }