/*
 * blocks.css: the styles of the standard blocks (brief 47; inc/blocks.php, patterns/global-*.php). Loaded on every page,
 * after base.css, so a block looks the same wherever it is placed. One copy of each rule: the foil (.op-foil) and the
 * Rarity panels used to sit in home.css, cards.css and character.css; they live here only (16 Oct).
 * Moved here unchanged from home.css: Why OverPower (both rounds), the pack opening, Learn to Play, the roster, foil, Rarity.
 * New: the CTA banner, Players, Join the fight, Pick where to start, Creators, Stores and Retailer support.
 * Phone below 782: 2-up grids, nothing scrolls sideways.
 */

/* ---------- 8 Join the community (patterns/global-join.php): band #0B1740, above the footer on every page. Moved from base.css, 25 Oct ---------- */
.op-community { background: var(--wp--preset--color--panel); border-top: 1px solid var(--wp--custom--line--divider); }
.op-community label {
	display: block;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.op-community input[type="email"] {
	flex-grow: 1;
	min-width: 0;
	min-height: 52px;
	padding: 0 16px;
	background: var(--wp--preset--color--ground);
	border: 1px solid rgba(147, 166, 206, .35);
	border-radius: var(--wp--custom--radius--panel);
	color: var(--wp--preset--color--text);
	font: 16px var(--wp--preset--font-family--body);
}
.op-community__form { display: flex; gap: 16px; max-width: 528px; }
/* The sign-up's trap field (bots fill it, people never see it) and its status line (12 Nov, Launch Readiness). */
.op-community__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.op-community__msg { margin: 12px 0 0; font-size: 16px; color: var(--wp--preset--color--yellow); }
.op-community__msg.is-error { color: #ff8a80; }
.op-community__newsletter.is-busy button { opacity: .6; pointer-events: none; }
.op-community__channels { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; padding-top: 24px; border-top: 1px solid var(--wp--custom--line--divider); }
.op-community__channels .op-community__follow { margin: 0 8px 0 0; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.op-community__channels a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(169,188,226,.45); color: var(--wp--preset--color--text); background: rgba(6,12,36,.5); text-decoration: none; transition: border-color 150ms, color 150ms, background 150ms; }
.op-community__channels a::after { content: none; }
.op-community__channels a svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.op-community__channels a:hover { color: var(--wp--preset--color--yellow); border-color: var(--wp--preset--color--yellow); }
/* The art at full strength, only its left side fading into the band (Home overhaul, Mr Manager 24 Oct; every page since 25 Oct). */
/* 27 Oct (Mr Manager): the art takes about two thirds of the band, with a longer, more gradual fade on its left (was half, fading
   over its first 60%). Still at full strength: only its left side fades, nothing dims it. */
.op-community__art { position: absolute; top: 0; bottom: 0; right: 0; width: 66%; overflow: hidden; opacity: 1; pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.78) 46%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.78) 46%, #000 60%); }
/* The band is a constrained-layout group: its block gap gave this absolute art a 24px top margin, a blue bar above the image (Mr Manager, 15 Oct). */
.op-community > .op-community__art { margin: 0; }
.op-community__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.13); transform-origin: 50% 100%; }
.op-community__credit { position: absolute; right: 16px; bottom: 12px; z-index: 1; margin: 0; font-size: 14px; color: #DCE6F5; background: rgba(6, 12, 36, .82); padding: 4px 8px; border-radius: 2px; }
.op-community > .wp-block-group, .op-community > nav, .op-community > form { position: relative; z-index: 1; }
@media (max-width: 781px) {
	.op-community__form { flex-direction: column; gap: 12px; }
	.op-community__channels { gap: 12px 16px; padding-top: 16px; } .op-community__follow { flex-basis: 100%; }
	.op-community__art { display: none; }
}

/* ---------- 5 Card Library (patterns/global-card-library.php, the Lazarus Chamber): the hand on an uncut sheet of cards (blue, 30%); moved from home.css 14 Oct, from base.css 25 Oct ---------- */
.oph-chamber__visual { position: relative; }
.oph-sec:has(.oph-sheet) { overflow: clip; }
.oph-sheet { position: absolute; left: -12%; right: -12%; top: -120px; bottom: -40px; z-index: 0; pointer-events: none; }
.oph-sheet img { position: absolute; left: 50%; top: 50%; width: 112%; height: auto; transform: translate(-50%, -50%) rotate(-14deg); opacity: .3; filter: saturate(.7) brightness(.8);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
	-webkit-mask-composite: source-in; mask-composite: intersect; }
.oph-hand { z-index: 1; }
.oph-hand.dealt img { animation: oph-hand 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes oph-hand { 0% { opacity: 0; transform: translateX(-50%) translateY(120px) rotate(var(--r)) scale(.9); } 100% { opacity: 1; transform: translateX(-50%) rotate(var(--r)); } }
/* The deal plays on phones too (Mr Manager, 15 Oct: the Lazarus Chamber's card animation); only reduced motion turns it off. */
@media (prefers-reduced-motion: reduce) { .oph-hand.dealt img { animation: none; } }
.oph-hand__draw { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 8px; }
.oph-subtle { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); text-decoration: none; border: 1px solid rgba(169, 188, 226, .45); border-radius: 2px; background: rgba(6, 12, 36, .6); }
.oph-subtle:hover { color: var(--wp--preset--color--text); }
.oph-hand { position: relative; height: 380px; margin-top: -24px; --rho: 408px; }
.oph-hand img { position: absolute; left: 50%; bottom: 40px; width: 172px; transform-origin: 50% 220%; transform: translateX(-50%) rotate(var(--r)); border-radius: 10px; box-shadow: 0 16px 36px rgba(0,0,0,.55); translate: 0 0; rotate: 0deg; scale: 1; transition: translate 460ms cubic-bezier(.22,1,.36,1), rotate 460ms cubic-bezier(.22,1,.36,1), scale 460ms cubic-bezier(.22,1,.36,1), filter 320ms ease, box-shadow 460ms cubic-bezier(.22,1,.36,1), z-index 0s linear 200ms; will-change: translate, scale; }
/* hover (home.js picks the card under the pointer by its angle in the fan, so moving across the fan never flickers):
   the card rights itself (upright, so its text reads, as if inspected), rises, grows and comes to the front; its neighbours part; the rest dim, so it reads as coming into frame.
   translate and scale are their own properties, so the deal animation on transform stays exactly as it is. */
@media (hover: hover) {
	.oph-hand.has-up img { filter: brightness(.7) saturate(.9); }
	.oph-hand img.is-near { translate: calc(var(--side, 0) * 22px) 0; filter: brightness(.8); }
	.oph-hand img.is-up { z-index: 20; rotate: calc(var(--r) * -1); translate: calc(sin(var(--r)) * var(--rho)) calc((1 - cos(var(--r))) * var(--rho)); scale: 1.12; filter: none; box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 34px 60px rgba(0,0,0,.75); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .oph-hand img { transition-duration: 0s; } }
@media (max-width: 781px) {
	.oph-sheet { display: none; }
	.oph-hand { margin-top: 0; height: 250px; }
	.oph-hand img { width: 104px; bottom: 24px; transform-origin: 50% 260%; box-shadow: 0 10px 24px rgba(0,0,0,.55); }
}

/* ---------- 3 Why OverPower: the crimp on top is the pack's sealed edge; the section is the pack ---------- */
.oph-why { position: relative; background: var(--wp--preset--color--panel-2); padding: 72px 0 72px; }
/* 25 Oct: the crimp that sat on top of this block (.oph-crimp-top, with a white line at its end) is gone: the hero above carries the
   standard crimp, its art running on under it (home.css). The top padding lost the crimp's 96 / 64 px, so the content stays put. */
.oph-why .is-style-subline { margin: 0 0 40px; }
/* The three booster packs float over the join between the hero and Why OverPower, half on each, in front of the crimp (Mr Manager, 2 Oct).
   --pw is one pack's width; the section's top padding clears the lower half of the packs. Phone: the packs stay in the hero, as before. */
.oph-floatpacks { display: none; }
@media (min-width: 782px) {
	.oph-why--packs { --pw: clamp(96px, 11.8vw, 170px); padding-top: calc(var(--pw) * .888 + 56px - 96px); }
	.oph-floatpacks { display: block; position: absolute; left: calc(max(40px, (100% - 1080px) / 2) + var(--pw) * 1.5); top: -96px; /* over the art's edge, as before: the crimp is now the hero's last 96 px */ z-index: 6; width: 0; height: 0; pointer-events: none; }
	.oph-floatpacks::before { content: ""; position: absolute; left: calc(var(--pw) * -1.68); top: calc(var(--pw) * .48); width: calc(var(--pw) * 3.36); height: calc(var(--pw) * .44); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0)); }
	.oph-floatpacks img { position: absolute; top: calc(var(--pw) * -.848); left: calc(var(--pw) * -.5); width: var(--pw); height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)) drop-shadow(0 28px 34px rgba(0,0,0,.6)); }
	.oph-floatpacks img:nth-child(1) { transform: translate(-86%, 10.4%) rotate(-13deg); }
	.oph-floatpacks img:nth-child(2) { z-index: 1; transform: translateY(-5.6%); }
	.oph-floatpacks img:nth-child(3) { transform: translate(86%, 10.4%) rotate(13deg); }
}
.oph-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oph-team__front { display: flex; gap: 6px; }
.oph-team img { width: 64px; height: auto; border-radius: 3px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.oph-team__reserve img { transform: rotate(8deg); opacity: .9; }
.oph-icons { display: grid; grid-template-columns: repeat(2, 56px); gap: 10px; justify-content: center; }
.oph-icons img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.oph-bigword { font-family: var(--wp--preset--font-family--display); font-size: 64px; line-height: .86; text-transform: uppercase; 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); }
.oph-foilcard { position: relative; width: 150px; }
.oph-foilcard img { display: block; width: 100%; border-radius: 6px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
@media (max-width: 781px) {
	.oph-why { padding: 40px 0 40px; }
	.oph-why .is-style-subline { margin-bottom: 24px; }
	.oph-team img { width: 40px; }
	.oph-icons { grid-template-columns: repeat(2, 34px); gap: 8px; }
	.oph-icons img { width: 34px; height: 34px; }
	.oph-bigword { font-size: 40px; }
	.oph-foilcard { width: 90px; }
}

/* ---------- 4 Learn to Play: the real demo's mat and seats on a 3D plane. The camera is the demo's "Battle lines" view (mat px 150,500 to 1600,1430), tilted; the cards sit on the plane, so they take the perspective. ---------- */
.oph-table { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; background: radial-gradient(ellipse at 60% 45%, #0E1745, #04081F 75%); }
/* ---------- Learn to Play section: the mat is the whole section's ground; the copy and the team sit over a scrim on the left ---------- */
.oph-learn { position: relative; min-height: 820px; padding-block: 72px; overflow: hidden; isolation: isolate; }
.oph-learn__bg { position: absolute; inset: 0; z-index: 0; }
.oph-learn__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,12,36,.92) 0%, rgba(6,12,36,.78) 34%, rgba(6,12,36,.25) 52%, rgba(6,12,36,0) 68%), linear-gradient(180deg, rgba(6,12,36,.6) 0%, rgba(6,12,36,0) 18%, rgba(6,12,36,0) 82%, rgba(6,12,36,.6) 100%); }
.oph-learn .oph-split { position: relative; z-index: 2; }
.oph-learn .oph-split__copy { max-width: 440px; }
/* "Rather watch?" under the buttons: room above it and one extra line below it (Mr Manager, 27 Oct: "too squished") */
.oph-learn .oph-learn__watch { margin-top: 16px; margin-bottom: 1.6em; }
.oph-learn .oph-ltp__plane { left: 18%; top: -46%; width: 86%; transform-origin: 50% 60%; transform: rotateX(30deg) scale(1.02); }
.oph-learn .oph-ltp__cam { perspective: 1500px; perspective-origin: 62% 35%; }
.oph-learn .oph-ltp__banner { left: 64%; top: 32%; }
/* the team panel: four cards 3 + 1, the blank cog carrying the total, New Team */
.oph-teamp { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; padding: 16px 18px; background: rgba(11,23,64,.72); border: 1px solid rgba(92,225,230,.22); border-radius: 4px; backdrop-filter: blur(6px); }
.oph-teamp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oph-teamp .oph-labs { margin: 0; color: var(--wp--preset--color--text); font-size: 15px; letter-spacing: .08em; line-height: 1.15; min-width: 0; }
.oph-teamp .oph-team { align-items: center; gap: 8px; }
.oph-teamp .oph-team__front { gap: 8px; }
.oph-teamp .oph-team img { width: 92px; transition: opacity 250ms; }
/* the reserve sits centred under the middle seat, straight */
.oph-teamp .oph-team__reserve { display: flex; justify-content: center; }
.oph-teamp .oph-team__reserve img { transform: none; opacity: 1; }
/* the cog, small, with the two rules beside it, one per line */
.oph-teamp__points { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(92,225,230,.18); }
.oph-points { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--wp--preset--font-size--small); line-height: 1.25; color: var(--wp--preset--color--text); }
.oph-points span { white-space: nowrap; }
.oph-threat { position: relative; width: 56px; height: 56px; flex: none; }
.oph-threat img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.oph-threat b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: #0A0A0A; transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
.oph-threat.tick b { transform: scale(1.18); }
.oph-teamp .oph-subtle { cursor: pointer; min-height: 36px; flex: none; }
.oph-packfan { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.oph-packfan img { width: auto; height: 100%; max-width: 34%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.oph-packfan img:nth-child(1) { transform: rotate(-16deg) translate(14%, 4%); }
.oph-packfan img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6%); }
.oph-packfan img:nth-child(3) { transform: rotate(16deg) translate(-14%, 4%); }
.oph-ltp__cam { position: absolute; inset: 0; z-index: 1; perspective: 1300px; perspective-origin: 50% 35%; }
.oph-ltp__plane { position: absolute; left: -3%; top: -47%; width: 106%; aspect-ratio: 1728 / 2016; transform-origin: 50% 60%; transform: rotateX(28deg) scale(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px rgba(0,0,0,.6); border-radius: 4px; }
.oph-ltp__mat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4px; }
.oph-ltp__plane::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,12,36,.55) 0%, rgba(6,12,36,.05) 35%, rgba(6,12,36,0) 60%, rgba(6,12,36,.35) 100%); }
.oph-ltp__card { position: absolute; z-index: 2; border-radius: 1.2%/1.6%; box-shadow: 0 6px 14px rgba(0,0,0,.55); transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s, box-shadow .3s; }
.oph-ltp__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.oph-ltp__card.is-opp { transform: rotate(180deg); }
.oph-ltp__pile { box-shadow: 0 1px 0 #0B1F5C, 0 2px 0 #0B1F5C, 0 3px 0 #0B1F5C, 0 8px 14px rgba(0,0,0,.55); }
/* the demo's states: the attacker lifts (cyan), the target is aimed at (red), the attack card lands in front of the target; a block lands on the attack card; a hit turns sideways where it lies */
.oph-ltp__char.lift { outline: 4px solid #5CE1E6; outline-offset: 3px; transform: translateY(-14px) scale(1.05); z-index: 60; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.oph-ltp__char.is-opp.lift { transform: rotate(180deg) translateY(14px) scale(1.05); }
.oph-ltp__char.aim { outline: 4px solid #EE1C25; outline-offset: 3px; }
.oph-ltp__x { position: absolute; z-index: 80; opacity: 0; border-radius: 3%/2.2%; box-shadow: 0 10px 24px rgba(0,0,0,.6); transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.oph-ltp__x img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.oph-ltp__x .tag { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); white-space: nowrap; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: #F0E437; color: #02125F; }
.oph-ltp__x .tag.opp { background: #EE1C25; color: #fff; }
.oph-ltp__x .tag.blk { background: #5CE1E6; color: #04102E; }
.oph-ltp__x.tagdown .tag { top: auto; bottom: -22px; }
.oph-ltp__x.hitcard { transform: rotate(90deg); }
.oph-ltp__x.hitcard .tag { display: none; }
.oph-ltp__banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); z-index: 5; font-family: var(--wp--preset--font-family--display); font-size: clamp(44px, 12cqw, 110px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--wp--preset--color--yellow); text-shadow: 2px 2px 0 #C8161E, 4px 4px 0 #02125F, 0 12px 30px rgba(0,0,0,.7); opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.oph-ltp__banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@keyframes oph-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce), (max-width: 781px) { .oph-ltp__card, .oph-ltp__x { transition: none; } }
@media (max-width: 1099px) { .oph-learn .oph-ltp__plane { left: -12%; width: 124%; top: -22%; } .oph-learn .oph-split { grid-template-columns: 1fr; } .oph-learn .oph-split__copy { max-width: 520px; } .oph-learn__space { display: none; } .oph-learn__scrim { background: linear-gradient(90deg, rgba(6,12,36,.9) 0%, rgba(6,12,36,.7) 55%, rgba(6,12,36,.35) 100%); } }
@media (max-width: 781px) { .oph-learn { min-height: 0; padding-block: 40px; } .oph-learn .oph-ltp__plane { left: 0; width: 120%; top: -30%; } .oph-learn__scrim { background: rgba(6,12,36,.72); } .oph-teamp .oph-team img { width: 88px; } }

/* ---------- 5 Roster ---------- */
.oph-roster__buttons { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; }
@media (max-width: 781px) {
	.oph-roster__buttons { flex-direction: column; align-items: stretch; margin-top: 24px; }
	.oph-roster__buttons .wp-block-buttons { width: 100%; }
}


/* ---------- Foil (26 Oct, Mr Manager: one foil for every foil card, the old site's Rarity page is the model). The mask is the card's own
   print separation, inverted: where the printer's F file is untouched the card is silver, where it is tinted it is matte (tools/foil/make_masks.py).
   Two achromatic layers through that mask: a broad silver band (.op-foil__prism) and a specular highlight (its ::after). At rest the foil shows
   as flat silver and does not move. Under the pointer the card tilts (global.js, up to 7.5 / 5.5 deg), the band travels against the pointer and
   the highlight sits under it, so the silver moves the way cold foil does under a light. Touch and reduced motion: the still silver. ---------- */
.op-foil { position: relative; display: block; isolation: isolate; transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform 120ms cubic-bezier(.2,.8,.2,1); }
.op-foil img { display: block; }
.op-foil__prism { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; -webkit-mask-image: var(--foil); mask-image: var(--foil); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: screen; opacity: .38;
	background: linear-gradient(104deg, transparent 14%, rgba(222,233,247,.26) 32%, rgba(255,255,255,.52) 48%, rgba(200,214,234,.26) 64%, transparent 84%); background-size: 230% 230%; background-position: calc(100% - var(--sx, 50%)) var(--sy, 50%); transition: opacity 300ms ease; }
.op-foil__prism::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .9; background: radial-gradient(52% 68% at var(--sx, 50%) var(--sy, 42%), rgba(255,255,255,.30), rgba(255,255,255,.06) 50%, transparent 74%); transition: opacity 300ms ease; }
@media (hover: hover) {
	.op-foil:hover .op-foil__prism { opacity: .62; }
	.op-foil:hover .op-foil__prism::after { opacity: 1; background: radial-gradient(42% 58% at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.72), rgba(255,255,255,.12) 48%, transparent 74%); }
}
.oph-cardtile .op-foil, .oph-cardtile .op-foil img { border-radius: var(--wp--custom--radius--card); }
.oph-foilcard .op-foil img { border-radius: 6px; }
.oph-foilcard .op-foil { filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.oph-foilcard .op-foil img { filter: none; }
@media (prefers-reduced-motion: reduce) { .op-foil { transform: none !important; transition: none; } .op-foil__prism { transition: none; } }

/* ---------- 10 Rarity and artists ---------- */
.oph-rarity__panels { margin-top: 40px; }
.oph-artpanel { position: relative; overflow: hidden; }
.oph-artpanel > img { position: absolute; left: -4%; top: -8%; width: 172%; height: auto; }
.oph-artpanel__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 12, 36, .86) 0%, rgba(6, 12, 36, .55) 50%, rgba(6, 12, 36, .2) 100%); }
.oph-artpanel__copy { position: relative; display: flex; flex-direction: column; height: 100%; }
.oph-artpanel__copy p { max-width: 58%; }
.oph-credit { position: absolute; right: 16px; bottom: 12px; margin: 0; font-size: var(--wp--preset--font-size--caption); color: #DCE6F5; background: rgba(6, 12, 36, .82); padding: 4px 8px; border-radius: 2px; }
@media (max-width: 781px) {
	.oph-rarity__panels { margin-top: 24px; grid-template-columns: 1fr; }
	.oph-artpanel { min-height: 220px; }
	.oph-artpanel__copy p { max-width: none; }
	.oph-credit { position: static; align-self: flex-start; margin-top: 16px; }
}

/* Pack opening (easter egg): the floating Atom Eve pack opens once per page load. Desktop and tablet only. */
@media (min-width: 782px) {
	.oph-floatpacks img[data-packopen] { pointer-events: auto; cursor: pointer; }
}
.oph-po { position: fixed; inset: 0; z-index: 9999; overflow: hidden; opacity: 0; transition: opacity .35s ease; perspective: 1400px; }
.oph-po.is-on { opacity: 1; }
.oph-po__pack, .oph-po__crimp, .oph-po__card { position: absolute; left: 50%; top: 50%; }
.oph-po__pack, .oph-po__crimp { width: var(--ppw); height: auto; margin: calc(var(--ppw) * -.8875) 0 0 calc(var(--ppw) * -.5); z-index: 40; filter: drop-shadow(0 18px 26px rgba(0,0,0,.6)); }
.oph-po__pack { clip-path: inset(9% 0 0 0); }
.oph-po__crimp { clip-path: inset(0 0 91% 0); transform-origin: 50% 5%; }
.oph-po__pack.is-whole { clip-path: none; }
.oph-po__card { width: var(--cw); height: calc(var(--cw) * 1.3958); margin: calc(var(--cw) * -.6979) 0 0 calc(var(--cw) * -.5); transform-style: preserve-3d; visibility: hidden; }
.oph-po__face { position: absolute; inset: 0; border-radius: calc(var(--cw) * .045); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #101E4E center / cover no-repeat; box-shadow: 0 10px 24px rgba(0,0,0,.55); }
.oph-po__face--front { transform: rotateY(180deg); }
.oph-po__face img { display: block; width: 100%; height: 100%; border-radius: calc(var(--cw) * .045); }
.oph-po__side { position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 1.3958); height: var(--cw); margin: calc(var(--cw) * -.5) 0 0 calc(var(--cw) * -.6979); transform: rotate(90deg); }
.oph-po .op-foil { width: 100%; height: 100%; border-radius: calc(var(--cw) * .045); }
.oph-po .op-foil__prism { opacity: .9; }
.oph-po__glow { position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 3.8); height: calc(var(--cw) * 2.8); margin: calc(var(--cw) * -1.4) 0 0 calc(var(--cw) * -1.9); border-radius: 50%; background: radial-gradient(closest-side, rgba(92,225,230,.5), rgba(92,225,230,0)); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.oph-po__glow.is-on { opacity: 1; }
.oph-po__count { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; font: 600 18px/1 var(--wp--preset--font-family--teko, system-ui), sans-serif; letter-spacing: 3px; color: #5CE1E6; pointer-events: none; text-shadow: 0 2px 6px #000, 0 0 14px #040919, 0 0 14px #040919; }
.oph-po__count.is-ur { color: #F5E12B; }

/* ---------- 3 Why OverPower, round 3 (Home canvas W03/W04, 12 Oct): die-cut panels, the pack under the title with the cards climbing out of it ---------- */
.oph-w { --oph-w-cut: 28px; --oph-w-cuts: 20px; text-align: left; }
.oph-w *, .oph-w *::before, .oph-w *::after { box-sizing: border-box; }
.oph-w .oph-center { text-align: center; }
.oph-w .is-style-subline { margin-bottom: 40px; }
.oph-w p, .oph-w h3, .oph-w ul, .oph-w dl, .oph-w dd { margin: 0; }
.oph-w ul { list-style: none; padding: 0; }
/* die-cut: corners cut like the stamped buttons; the hairline is a layer behind the cut */
.oph-w__edge { position: relative; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.oph-w__edge::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(160deg, rgba(92,225,230,.55), rgba(92,225,230,.08) 40%, rgba(240,228,55,.35));
	clip-path: polygon(calc(var(--oph-w-cut) + .5px) 0, 100% 0, 100% calc(100% - var(--oph-w-cut) - .5px), calc(100% - var(--oph-w-cut) - .5px) 100%, 0 100%, 0 calc(var(--oph-w-cut) + .5px)); }
.oph-w__edge--s { --oph-w-cut: var(--oph-w-cuts); }
.oph-w__cut { position: relative; height: 100%; overflow: hidden; background: linear-gradient(160deg, #16296E 0%, #0E1C52 45%, #0A1642 100%);
	clip-path: polygon(var(--oph-w-cut) 0, 100% 0, 100% calc(100% - var(--oph-w-cut)), calc(100% - var(--oph-w-cut)) 100%, 0 100%, 0 var(--oph-w-cut)); }
.oph-w__k { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--cyan); }
.oph-w__k::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.oph-w__stamp { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 84px; line-height: .86; text-transform: uppercase; color: var(--wp--preset--color--yellow); margin-top: 12px !important;
	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 14px 30px rgba(0,0,0,.6); }
.oph-w__sub { 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--cyan); margin-top: 8px !important; }
.oph-w__bd { font-size: 16px; line-height: 1.55; color: #C9D6F2; }
.oph-w__bd b { color: #fff; }
.oph-w__lk { display: inline-flex; gap: 8px; align-items: flex-end; min-height: 44px; padding-bottom: 6px; border-bottom: 2px solid rgba(92,225,230,.4); font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--cyan); text-decoration: none; white-space: nowrap; }
.oph-w__lk:hover, .oph-w__lk:focus-visible { color: var(--wp--preset--color--text); }
.oph-w__dots { position: absolute; right: 0; top: 0; width: 48%; height: 300px; pointer-events: none; background-image: radial-gradient(rgba(92,225,230,.22) 1.2px, transparent 1.6px); background-size: 12px 12px;
	-webkit-mask-image: linear-gradient(225deg, #000, transparent 70%); mask-image: linear-gradient(225deg, #000, transparent 70%); }

/* 01 No Pay to Win */
.oph-w__np { padding: 40px; }
.oph-w__nphead { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.oph-w__seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid rgba(92,225,230,.3); border-radius: 999px; background: rgba(4,9,25,.6); flex: none; margin-top: 4px; }
.oph-w__seg button { min-height: 36px; border: 0; background: none; cursor: pointer; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #C9D6F2; padding: 9px 12px 6px; border-radius: 999px; white-space: nowrap; transition: background-color 150ms cubic-bezier(.2,.8,.2,1), color 150ms cubic-bezier(.2,.8,.2,1); }
.oph-w__seg button:hover { color: var(--wp--preset--color--text); }
.oph-w__seg button[aria-selected="true"] { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); }
.oph-w__seg .oph-w__next { background: #1C3380; color: var(--wp--preset--color--yellow); }
.oph-w__seg button:focus-visible { outline: 3px solid var(--wp--preset--color--cyan); outline-offset: 2px; }
/* the stage: one composition, 1000 x 420 on desktop, scaled with its width; positions are % of the stage */
.oph-w__stage { position: relative; aspect-ratio: 1000 / 420; margin-top: 12px; }
.oph-w__banner { position: absolute; left: 18%; top: 28%; width: 90%; height: 36%; opacity: .5; transform: rotate(-8deg); pointer-events: none; }
.oph-w__it { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: rotate(var(--r)); }
.oph-w__back { border-radius: 7px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.oph-w__pack { z-index: 2; height: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)) drop-shadow(0 20px 26px rgba(0,0,0,.6)); }
.oph-w__card { z-index: 3; }
.oph-w__card img { display: block; width: 100%; height: auto; border-radius: 8px; }
.oph-w__card > img, .oph-w__card > .op-foil { filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.oph-w__card .op-foil, .oph-w__card .op-foil__prism { border-radius: 8px; }
.oph-w__tag { position: absolute; left: 12px; bottom: -16px; z-index: 4; display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px 5px; white-space: nowrap; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--yellow-ink);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); box-shadow: 0 6px 12px rgba(0,0,0,.4); }
.oph-w__tag b { font-weight: 700; }
.oph-w__tag--c { background: var(--wp--preset--color--text); }
.oph-w__tag--r { background: var(--wp--preset--color--cyan); }
.oph-w__tag--u { background: linear-gradient(180deg, #FFF6A0 0%, #F0E437 55%, #D8C31C 100%); }
.oph-w__tag--pack { left: 2.4%; top: 87%; bottom: auto; font-size: 15px; background: var(--wp--preset--color--yellow-ink); color: var(--wp--preset--color--text); }
.oph-w__same { position: absolute; left: 73%; top: 72%; z-index: 4; display: flex; flex-direction: column; gap: 12px; }
.oph-w__same li { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--text); padding-top: 2px; white-space: nowrap; }
.oph-w__pi { display: inline-flex; }
.oph-w__pi img { width: 24px; height: 24px; object-fit: contain; margin-left: -4px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.oph-w__pi img:first-child { margin-left: 0; }
.oph-w__cog { width: 26px; height: 26px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); }
.oph-w__chk { width: 22px; height: 22px; color: var(--wp--preset--color--yellow); flex: none; }
.oph-w__npfoot { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 40px; }
.oph-w__npfoot .oph-w__bd { max-width: 780px; }
/* re-deal on a character change: the three cards slide out of the pack */
.oph-w__stage.is-deal .oph-w__card { animation: oph-w-deal 600ms cubic-bezier(.2,.8,.2,1) both; }
.oph-w__stage.is-deal .oph-w__card[data-w="r"] { animation-delay: 120ms; }
.oph-w__stage.is-deal .oph-w__card[data-w="u"] { animation-delay: 250ms; }
@keyframes oph-w-deal { from { opacity: 0; translate: -40% 8%; } to { opacity: 1; translate: 0 0; } }
@keyframes oph-w-fade { from { opacity: 0; } to { opacity: 1; } }
/* !important: base.css switches every animation off with Reduce Motion; these smooth ones stay on (Mr Manager, 27 Oct) */
@media (prefers-reduced-motion: reduce) { .oph-w__stage.is-deal .oph-w__card { animation: oph-w-fade 420ms ease both !important; } }

/* 02-04: three die-cut tiles */
.oph-w__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.oph-w__tile { display: flex; flex-direction: column; padding: 24px; }
.oph-w__tile > * { position: relative; }
.oph-w__ghost { position: absolute !important; right: 12px; top: 14px; font-family: var(--wp--preset--font-family--display); font-size: 120px; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(92,225,230,.13); pointer-events: none; }
.oph-w__tt { margin-top: 12px !important; display: flex; flex-direction: column; gap: 4px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 32px; line-height: .95; letter-spacing: .03em; text-transform: uppercase; color: var(--wp--preset--color--text); }
.oph-w__tt span { font-weight: 500; font-size: 19px; line-height: 1; letter-spacing: .06em; color: var(--wp--preset--color--muted); }
.oph-w__vis { margin-top: 20px; min-height: 96px; }
.oph-w__tile .oph-w__bd { margin-top: 16px; }
.oph-w__tile .oph-w__lk { margin-top: auto; padding-top: 16px; align-self: flex-start; }
.oph-w__tile > .oph-w__stretch { position: static; }
.oph-w__stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.oph-w__stretch:focus-visible { outline: none; }
.oph-w__stretch:focus-visible::before { outline: 3px solid var(--wp--preset--color--cyan); outline-offset: -6px; }
.oph-w__tile { cursor: pointer; }
.oph-w__tile:hover .oph-w__lk { color: var(--wp--preset--color--text); }
.oph-w__powers { display: flex; justify-content: space-between; gap: 12px; max-width: 360px; }
.oph-w__powers li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oph-w__powers img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.oph-w__powers span { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); white-space: nowrap; }
.oph-w__fmt { display: flex; gap: 16px; align-items: center; }
.oph-w__fmt > div { display: flex; flex-direction: column; gap: 8px; }
.oph-w__grp { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--cyan); }
.oph-w__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oph-w__chips span { display: inline-flex; align-items: center; padding: 7px 10px 5px; border: 1px solid rgba(92,225,230,.4); border-radius: 999px; background: rgba(4,9,25,.55); font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--text); }
.oph-w__chips--y span { border-color: rgba(240,228,55,.6); }
.oph-w__stats { display: flex; flex-direction: column; gap: 4px; }
.oph-w__stats div { display: flex; align-items: center; gap: 12px; }
.oph-w__stats dt { width: 70px; flex: none; font-family: var(--wp--preset--font-family--display); font-size: 44px; line-height: .85; color: var(--wp--preset--color--yellow); text-shadow: 1px 1px 0 #C8161E, 2px 2px 0 #C8161E, 3px 3px 0 #02125F, 0 8px 14px rgba(0,0,0,.6); }
.oph-w__stats dd { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 17px; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--text); }
.oph-w__stats .op-tbc { font-size: 13px; }
.oph-w__map { position: absolute !important; right: -110px; top: 70px; width: 420px; max-width: none; opacity: .4; pointer-events: none;
	-webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }


/* tablet: the stage keeps its composition, the three "same" lines move under it */
@media (max-width: 1023px) {
	.oph-w__stamp { font-size: 64px; }
	.oph-w__nphead { flex-direction: column; }
	.oph-w__same { left: 0; top: 100%; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; }
	.oph-w__stage { margin-bottom: 80px; }
	.oph-w__trio { grid-template-columns: 1fr; }
}
/* phone: the canvas W04 composition, 358 x 530 */
@media (max-width: 781px) {
	.oph-w { --oph-w-cut: 20px; }
	.oph-w .is-style-subline { margin-bottom: 24px; }
	.oph-w__np { padding: 24px 16px; }
	.oph-w__stamp { font-size: 56px; }
	.oph-w__sub { font-size: 19px; }
	.oph-w__seg { margin: 16px -16px 0 0; max-width: calc(100% + 16px); overflow-x: auto; border-radius: 999px 0 0 999px; scrollbar-width: none; }
	.oph-w__seg::-webkit-scrollbar { display: none; }
	.oph-w__stage { aspect-ratio: 358 / 530; margin-top: 16px; }
	.oph-w__it { left: var(--px); top: var(--py); width: var(--pw); transform: rotate(var(--pr)); }
	.oph-w__banner { left: -11%; top: 57%; width: 128%; height: 17%; transform: rotate(-12deg); }
	.oph-w__tag { font-size: 15px; left: 10px; }
	.oph-w__tag--pack { display: none; }
	.oph-w__same { flex-direction: column; gap: 12px; margin-top: 48px; }
	.oph-w__stage { margin-bottom: 164px; }
	.oph-w__npfoot { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 16px; }
	.oph-w__trio { gap: 16px; margin-top: 16px; }
	.oph-w__tile { padding: 20px 16px; }
	.oph-w__vis { min-height: 0; }
}

/* ---------- CTA banner (patterns/global-cta.php): the line that closed Why OverPower, as a full-width red band, flush above and below (Mr Manager, 16 Oct) ---------- */
.opb-cta { position: relative; overflow: hidden; isolation: isolate; background: #7A0C12; padding-block: 40px; }
.opb-cta__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: left center; pointer-events: none; }
.opb-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.opb-cta__line { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 52px; line-height: .9; text-transform: uppercase; color: var(--wp--preset--color--yellow);
	text-shadow: 1px 1px 0 #02125F, 2px 2px 0 #02125F, 3px 3px 0 #02125F, 4px 4px 0 #02125F, 0 10px 20px rgba(0,0,0,.5); }
.opb-cta__br { display: none; }
.opb-cta .wp-block-buttons { display: flex; gap: 16px; flex: none; margin: 0; }
@media (max-width: 1023px) { .opb-cta__in { flex-direction: column; align-items: flex-start; } }
@media (max-width: 781px) {
	.opb-cta { padding-block: 32px; }
	.opb-cta__line { font-size: 40px; }
	.opb-cta__br { display: inline; }
	.opb-cta .wp-block-buttons { flex-direction: column; align-self: stretch; gap: 12px; }
}

/* ==================== Shared pieces of the standard blocks (16 Oct) ==================== */
.opb-ph { display: none; }
@media (max-width: 781px) {
	.opb-dsk { display: none !important; }
	.opb-ph { display: inline; }
	/* phone: buttons go full width, stacked 12 apart (Site Rules, 27 Sep; as on Home), in every shared block that has buttons
	   (25 Oct: also the Card Library, Join the community, Learn to Play and Rules and resources, which took it from home.css on Home only) */
	:is(section[class*="opb-"], .oph-chamber, .op-community, .oph-learn, .op-resources) .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
	:is(section[class*="opb-"], .oph-chamber, .op-community, .oph-learn, .op-resources) .wp-block-buttons .wp-block-button { margin: 0; }
	:is(section[class*="opb-"], .oph-chamber, .op-community, .oph-learn, .op-resources) .wp-block-buttons .wp-block-button__link { width: 100%; box-sizing: border-box; }
	:is(section[class*="opb-"], .oph-chamber, .op-community, .oph-learn, .op-resources) .wp-block-buttons .is-style-text-link { align-self: flex-start; }
}
.opb-lead { margin: 0 0 40px; max-width: 620px; }
.opb-num { flex: none; width: 32px; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: var(--wp--preset--font-size--title); line-height: 1; color: var(--wp--preset--color--cyan); }
.opb-label { margin: 0 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: .08em; text-transform: uppercase; }
.opb-yl { margin: 0 0 8px; 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: .08em; text-transform: uppercase; color: var(--wp--preset--color--yellow); }
.opb-chip { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--wp--custom--line--divider); border-radius: 999px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: var(--wp--preset--font-size--caption); line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); white-space: nowrap; }
.opb-panel__foot { margin-top: auto; padding-top: 24px; align-items: center; }
/* Key art with the credit banner baked in: scaled so the banner falls outside the frame (the .ka rule) */
.opb-ka { object-position: 50% 100%; transform: scale(1.13); transform-origin: 50% 100%; }
/* A product scene: each picture placed by % of the box */
.opb-scene { position: relative; width: 100%; }
.opb-scene img { position: absolute; display: block; height: auto; filter: contrast(1.14) saturate(1.18) drop-shadow(0 12px 12px rgba(0, 0, 0, .5)); }
.opb-scene img.opb-scene__flat { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); border-radius: 4px; }
.opb-scene img.opb-scene__mat { filter: contrast(1.06) saturate(1.1) drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
/* Numbered steps */
.opb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.opb-steps li { display: flex; gap: 12px; align-items: flex-start; }
.opb-steps p { margin: 0; }
.opb-steps b { display: block; font-weight: 600; font-size: var(--wp--preset--font-size--body); line-height: 1.4; color: var(--wp--preset--color--text); }
/* Questions that open */
.opb-faq details { border-bottom: 1px solid var(--wp--custom--line--divider); }
.opb-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; font-weight: 600; font-size: var(--wp--preset--font-size--body); line-height: 1.4; color: var(--wp--preset--color--text); }
.opb-faq summary::-webkit-details-marker { display: none; }
.opb-faq summary svg { flex: none; transition: transform 200ms cubic-bezier(.2, .8, .2, 1); }
.opb-faq details[open] summary svg { transform: rotate(180deg); }
.opb-faq details p { margin: 0; padding: 0 0 16px; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; max-width: 620px; }
.opb-faq details p a { color: var(--wp--preset--color--cyan); }
.opb-faq details :is(ul, ol) { margin: 0; padding: 0 0 16px 20px; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; max-width: 620px; } /* a list in an answer, from the /faq/ page */
.opb-faq details :is(ul, ol) a { color: var(--wp--preset--color--cyan); }

/* ---------- The standard FAQ section (overpower_faq_section() in inc/blocks.php; Mr Manager, 23 Oct). Two columns on desktop, one on phone ---------- */
.opb-faqsec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "head list" "help list"; grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
.opb-faqsec__head { grid-area: head; container-type: inline-size; }
/* The title always stays on one line (his word, 23 Oct): it shrinks to fit its column. Niagara runs about 0.27–0.29 em a letter; 0.3 leaves a margin. */
.opb-faqsec__head .oph-h2 { margin: 0; white-space: nowrap; font-size: min(var(--wp--preset--font-size--section), calc(100cqi / (var(--len, 12) * 0.3))); }
.opb-faqsec__list { grid-area: list; }
.opb-faqsec__list .opb-faq { border-top: 1px solid var(--wp--custom--line--divider); }
.opb-faqsec__help { grid-area: help; align-self: start; margin-top: 24px; }
.opb-faqsec__help p { margin: 0; }
.opb-faqsec__links { margin-top: 4px; font-weight: 600; }
.opb-faqsec__links a { color: var(--wp--preset--color--cyan); }
@media (max-width: 781px) {
	.opb-faqsec__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "help"; grid-template-rows: none; }
	.opb-faqsec__head { margin-bottom: 24px; }
}

/* ---------- Latest (patterns/global-latest.php): the newest posts as news cards (overpower_news_latest(), inc/news.php). Moved from home.css 25 Oct
   so the block looks the same wherever it sits. The news card itself (.op-kcard) and its fonts: news.css ---------- */
.oph-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.oph-news__item { display: flex; flex-direction: column; gap: 8px; }
/* phone: three columns, two rows (Mr Manager, 1 Oct); the seventh and eighth posts are desktop only */
@media (max-width: 781px) { .oph-news { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .oph-news__item:nth-child(n+7) { display: none; } }

/* ---------- 1 Players: Find your table (patterns/global-players.php). v4 (Mr Manager, 23 Oct, Organized Play): the store map on
   top, full brightness, the full width of the screen, linking to Find a store; no backdrop art (the 16 Oct Walkers wash is gone) ---------- */
.opb-players { position: relative; overflow: hidden; isolation: isolate; background: var(--wp--preset--color--ground); }
.opb-players__map { position: relative; display: block; margin: 40px 0; overflow: hidden; background: var(--wp--preset--color--ground); }
.opb-players__map img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; object-position: 50% 45%; transition: transform .4s ease; }
/* a soft fade into the section at the top and bottom edges only: the store circles stay bright */
.opb-players__map::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, var(--wp--preset--color--ground) 0%, transparent 10%, transparent 88%, var(--wp--preset--color--ground) 100%); }
.opb-players__cta { position: absolute; z-index: 1; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 12px 24px; border-radius: 4px;
	border: 1px solid var(--wp--preset--color--cyan); background: rgba(6, 12, 36, .86); color: var(--wp--preset--color--cyan);
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.opb-players__cta::after { content: " →"; }
.opb-players__map:hover img, .opb-players__map:focus-visible img { transform: scale(1.015); }
.opb-players__map:hover .opb-players__cta, .opb-players__map:focus-visible .opb-players__cta { background: var(--wp--preset--color--cyan); color: #060C24; }
@media (prefers-reduced-motion: reduce) { .opb-players__map img { transition: none; } .opb-players__map:hover img, .opb-players__map:focus-visible img { transform: none; } }
/* text link above, the button at the bottom of the panel (v3) */
.opb-players__more { margin: -8px 0 24px; }
/* Don't see your store? */
.opb-players__join { margin: 24px 0 0; text-align: center; }
.opb-players .oph-panel { gap: 0; }
.opb-players .oph-labs { margin: 0 0 12px; }
.opb-players .oph-panel > .oph-small { margin-bottom: 24px; }
.opb-players__form, .opb-players__actions { margin-top: auto; }
.opb-players__form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.opb-players__form input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; background: var(--wp--preset--color--ground); border: 1px solid var(--wp--custom--line--divider); border-radius: 2px; color: var(--wp--preset--color--text); font: inherit; font-size: var(--wp--preset--font-size--small); }
.opb-players__actions { align-items: center; }
@media (max-width: 781px) {
	.opb-players .oph-panel { gap: 12px; }
	.opb-players .oph-labs, .opb-players .oph-panel > .oph-small { margin: 0; }
	.opb-players__form { align-items: stretch; }
	.opb-players__actions { flex-direction: column; align-items: stretch; }
	.opb-players__more { margin: 0; }
	/* the map: a taller crop on a phone so the store circles read */
	.opb-players__map { margin: 24px 0; }
	.opb-players__map img { aspect-ratio: 4 / 3; height: auto; object-position: 62% 50%; }
	.opb-players__cta { bottom: 24px; padding: 8px 16px; font-size: 13px; }
}

/* ---------- 2 Stores: Organized Play (patterns/global-stores.php; built for Find a store on 16 Oct, moved here unchanged) ---------- */
.opb-stores { background: var(--wp--preset--color--panel-2); }
.opb-stores__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.opb-stores__copy { grid-column: 1 / span 6; }
.opb-stores__body { margin: 4px 0 24px; max-width: 620px; }
.opb-stores__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.opb-stores__steps li { display: flex; flex-direction: column; gap: 8px; }
.opb-stores__steps .opb-num { font-size: var(--wp--preset--font-size--subsection); line-height: .86; }
.opb-stores__step { margin: 0; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; }
.opb-stores__actions { margin-top: 40px; align-items: center; gap: 16px; }
.opb-stores__scene { grid-column: 7 / span 6; position: relative; aspect-ratio: .96; margin-top: -24px; }
.opb-stores__scene img { position: absolute; display: block; height: auto; filter: contrast(1.14) saturate(1.18) drop-shadow(0 12px 12px rgba(0, 0, 0, .5)); }
.opb-stores__disp { left: 19%; top: 0; width: 62%; z-index: 1; }
.opb-stores__d1 { left: 0; bottom: 31%; width: 17%; z-index: 2; }
.opb-stores__d2 { left: 11.5%; bottom: 25.5%; width: 17%; z-index: 3; }
.opb-stores__d3 { left: 71.5%; bottom: 25.5%; width: 17%; z-index: 3; }
.opb-stores__d4 { left: 83%; bottom: 31%; width: 17%; z-index: 2; }
.opb-stores__p1, .opb-stores__p2, .opb-stores__p3, .opb-stores__q1, .opb-stores__q2, .opb-stores__q3 { width: 13%; transform-origin: 50% 100%; }
.opb-stores__p1 { left: 20.4%; bottom: 1%; z-index: 6; transform: rotate(-12deg); }
.opb-stores__p2 { left: 29.6%; bottom: 1%; z-index: 7; transform: rotate(12deg); }
.opb-stores__p3 { left: 25%; bottom: 2.5%; z-index: 8; }
.opb-stores__q1 { left: 57.4%; bottom: 1%; z-index: 6; transform: rotate(-12deg); }
.opb-stores__q2 { left: 66.6%; bottom: 1%; z-index: 7; transform: rotate(12deg); }
.opb-stores__q3 { left: 62%; bottom: 2.5%; z-index: 8; }
@media (max-width: 1023px) {
	.opb-stores__copy { grid-column: 1 / -1; }
	.opb-stores__scene { grid-column: 1 / -1; width: min(560px, 100%); margin: 40px auto 0; }
}
@media (max-width: 781px) {
	.opb-stores__steps { grid-template-columns: 1fr; gap: 16px; }
	.opb-stores__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
	.opb-stores__steps li .opb-num { grid-row: 1 / span 2; }
	.opb-stores__actions { margin-top: 24px; }
}

/* ---------- 3 Retailer support (patterns/global-retail.php) ---------- */
.opb-retail { background: var(--wp--preset--color--deep); }
.opb-retail__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.opb-retail__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.opb-retail__copy .opb-lead { margin-bottom: 24px; }
.opb-retail__displays { display: flex; gap: 24px; align-items: flex-end; }
.opb-retail__displays img { display: block; width: 150px; height: auto; filter: contrast(1.14) saturate(1.18) drop-shadow(0 12px 12px rgba(0, 0, 0, .5)); }
.opb-retail__displays img + img { width: 168px; }
.opb-retail__posters { grid-column: 6 / span 7; margin: 0; }
.opb-retail__posterscene { aspect-ratio: 1.42; }
.opb-retail__posters figcaption { text-align: center; margin-top: 16px; }
.opb-retail__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; margin-top: 40px; }
.opb-retail__msg { padding: 16px 0; border-top: 1px solid var(--wp--custom--line--divider); }
.opb-retail__msg:first-child { padding-top: 0; border-top: 0; }
.opb-retail__msg:last-child { padding-bottom: 0; }
.opb-retail__msg .oph-h3 { margin-bottom: 8px; }
.opb-prices { display: flex; gap: 24px; align-items: baseline; margin-top: 8px; }
.opb-price { margin: 0; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: var(--wp--preset--font-size--subsection); line-height: 1; letter-spacing: .02em; color: var(--wp--preset--color--yellow); white-space: nowrap; }
.opb-price span { font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.opb-retail__mat { aspect-ratio: 1.45; }
.opb-retail__pair { margin-top: 24px; }
.opb-retail__pair .oph-h3 { margin-bottom: 16px; }
@media (max-width: 1023px) {
	.opb-retail__copy, .opb-retail__posters { grid-column: 1 / -1; }
	.opb-retail__posters { margin-top: 24px; }
	.opb-retail__box { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 781px) {
	.opb-retail__displays { justify-content: center; gap: 16px; }
	.opb-retail__displays img { width: 42%; }
	.opb-retail__displays img + img { width: 46%; }
	.opb-retail__box { margin-top: 24px; }
	.opb-prices { gap: 16px; }
	.opb-retail__pair { margin-top: 16px; }
	.opb-panel__foot { flex-direction: column; align-items: stretch; }
}

/* ---------- 6 Join the fight (patterns/global-fight.php). Allen's face (32.5% across, 31.5% down the art) is held at the
   section's centre at every width (Mr Manager, 16 Oct): the art is at least 74.1% of the screen wide, so it still reaches the
   right edge, and is shifted so his face sits on the centre line, between the copy (columns 1 to 5) and the fan (8 to 12). ---------- */
.opb-fight { position: relative; overflow: hidden; isolation: isolate; min-height: 520px; display: flex; align-items: center; background: var(--wp--preset--color--ground); } /* 640 → 520, tightened (23 Oct) */
.opb-fight__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; }
/* --aw: the art's width: at least 74.1% of the section (so it reaches the right edge with the face on the centre line), at least
   151.5% of its height (so it fills it top to bottom) and at least 1080 px. Face 40% down where the height allows. */
.opb-fight__art img { --aw: max(1080px, 74.1cqw, 151.6cqh); position: absolute; max-width: none; width: var(--aw); height: auto; left: calc(50cqw - var(--aw) * .325); top: clamp(calc(100cqh - var(--aw) * .66), calc(40cqh - var(--aw) * .66 * .315), 0px);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
.opb-fight__art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 20, 54, .9) 0%, rgba(10, 20, 54, .55) 30%, rgba(10, 20, 54, 0) 42%); }
.opb-fight__art::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(6, 12, 36, .5) 0%, rgba(6, 12, 36, 0) 24%); }
.opb-fight__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.opb-fight__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.opb-fight__copy .oph-h2 { text-shadow: 1px 1px 0 #C8161E, 2px 2px 0 #8E0E14, 3px 3px 0 #02125F, 4px 4px 0 #02125F, 0 0 18px rgba(4, 9, 25, .85); }
.opb-fight__body, .opb-fight__list { color: #DCE6F5; text-shadow: 0 1px 2px rgba(4, 9, 25, .95), 0 0 10px rgba(4, 9, 25, .85), 0 0 22px rgba(4, 9, 25, .6); }
.opb-fight__body { margin: 0 0 12px; max-width: 620px; }
.opb-fight__list { margin: 0; padding-left: 20px; }
.opb-fight__list li + li { margin-top: 8px; }
.opb-fight__actions { margin-top: 24px; }
.opb-fight__more { margin: 20px 0 0; }
@media (min-width: 782px) { .opb-fight__actions { flex-wrap: nowrap; width: max-content; } }
.opb-fight__packs { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.opb-fight__packs .oph-caption { margin: 0; }
.opb-fight__still { display: none; }
.opb-fight__credit { position: absolute; right: 16px; bottom: 12px; z-index: 2; margin: 0; }
/* the fan of five packs, with the Lazarus Chamber hand's hover */
.opb-ppfan { position: relative; width: 440px; height: 318px; --rho: 398px; }
.opb-pk { position: absolute; left: 50%; bottom: 28px; width: 132px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 220%; transform: translateX(-50%) rotate(var(--r)); translate: 0 0; rotate: 0deg; scale: 1; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .6)); transition: translate 250ms cubic-bezier(.2, .8, .2, 1), rotate 250ms cubic-bezier(.2, .8, .2, 1), scale 250ms cubic-bezier(.2, .8, .2, 1), filter 250ms cubic-bezier(.2, .8, .2, 1); }
.opb-pk img { display: block; width: 100%; height: auto; }
.opb-ppfan.has-up .opb-pk { filter: brightness(.7) saturate(.9) drop-shadow(0 14px 16px rgba(0, 0, 0, .6)); }
.opb-ppfan .opb-pk.is-near { translate: calc(var(--side, 0) * 22px) 0; filter: brightness(.8) drop-shadow(0 14px 16px rgba(0, 0, 0, .6)); }
.opb-ppfan .opb-pk.is-up, .opb-ppfan .opb-pk:focus-visible { z-index: 20; rotate: calc(var(--r) * -1); translate: calc(sin(var(--r)) * var(--rho)) calc((1 - cos(var(--r))) * var(--rho)); scale: 1.12; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .75)) drop-shadow(0 30px 34px rgba(0, 0, 0, .7)); }
.opb-ppfan .opb-pk.is-open { visibility: hidden; }
.opb-ppfan.is-done .opb-pk { pointer-events: none; cursor: default; }
.opb-pp__title { position: relative; margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: var(--wp--preset--font-size--subsection); line-height: .9; text-transform: uppercase; color: var(--wp--preset--color--yellow); text-shadow: 1px 1px 0 #C8161E, 2px 2px 0 #8E0E14, 3px 3px 0 #02125F, 4px 4px 0 #02125F, 0 0 14px rgba(4, 9, 25, .95), 0 0 30px rgba(4, 9, 25, .9), 0 10px 26px rgba(0, 0, 0, .85); }
@media (prefers-reduced-motion: reduce) { .opb-pk { transition-duration: 0s; } }
/* the opening, full screen (as the Home pack opening) */
.opb-pp { position: absolute; inset: 0; z-index: 30; overflow: hidden; background: rgba(5, 10, 30, .85); opacity: 0; transition: opacity .35s ease; perspective: 1400px; cursor: pointer; } /* inside the section, not the whole page (25 Oct) */
.opb-pp[hidden] { display: none; }
.opb-pp.is-on { opacity: 1; }
.opb-pp__pack, .opb-pp__crimp, .opb-pp__card { position: absolute; left: 50%; top: 50%; }
.opb-pp__pack, .opb-pp__crimp { width: var(--ppw); height: auto; margin: calc(var(--ppw) * -.885) 0 0 calc(var(--ppw) * -.5); z-index: 40; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)); visibility: hidden; }
.opb-pp__pack { clip-path: inset(8% 0 0 0); }
.opb-pp__crimp { clip-path: inset(0 0 92% 0); transform-origin: 50% 5%; }
.opb-pp__pack.is-whole { clip-path: none; }
.opb-pp__card { width: var(--cw); height: calc(var(--cw) * 1.3958); margin: calc(var(--cw) * -.6979) 0 0 calc(var(--cw) * -.5); transform-style: preserve-3d; visibility: hidden; }
.opb-pp__face { position: absolute; inset: 0; border-radius: calc(var(--cw) * .045); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #101E4E center / cover no-repeat; box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
.opb-pp__back { background-image: url(../images/blocks/pp-back.webp); }
.opb-pp__front { transform: rotateY(180deg); }
.opb-pp__hold { position: absolute; inset: 0; }
.opb-pp__hold.is-side { inset: auto; left: 50%; top: 50%; width: calc(var(--cw) * 1.3958); height: var(--cw); margin: calc(var(--cw) * -.5) 0 0 calc(var(--cw) * -.6979); transform: rotate(90deg); }
/* Foil (26 Oct, Mr Manager): the same silver as .op-foil, over the whole card (the prize-pack foils have no separation yet; tools/foil/make_prize_masks.py
   makes the masks all-over with the yellow name banner brighter). A faint silver sheen sits on the card; the band and the highlight follow the pointer. */
.opb-pp__foil { position: relative; display: block; width: 100%; height: 100%; border-radius: calc(var(--cw) * .045); overflow: hidden; isolation: isolate; transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform 120ms cubic-bezier(.2, .8, .2, 1); }
.opb-pp__foil img { display: block; width: 100%; height: 100%; border-radius: calc(var(--cw) * .045); }
.opb-pp__foil::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; -webkit-mask-image: var(--foil); mask-image: var(--foil); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: overlay; opacity: .5; background: linear-gradient(118deg, rgba(238, 242, 250, .9) 0%, rgba(160, 170, 188, .55) 40%, rgba(232, 238, 248, .9) 70%, rgba(150, 160, 178, .55) 100%); }
.opb-pp__prism { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; -webkit-mask-image: var(--foil); mask-image: var(--foil); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: screen; opacity: .62;
	background: linear-gradient(104deg, transparent 14%, rgba(222,233,247,.26) 32%, rgba(255,255,255,.52) 48%, rgba(200,214,234,.26) 64%, transparent 84%); background-size: 230% 230%; background-position: calc(100% - var(--sx, 50%)) var(--sy, 50%); }
.opb-pp__prism::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(42% 58% at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.72), rgba(255,255,255,.12) 48%, transparent 74%); }
.opb-pp__count { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; font: 600 18px/1 var(--wp--preset--font-family--label); letter-spacing: 3px; color: var(--wp--preset--color--cyan); pointer-events: none; z-index: 70; }
@media (prefers-reduced-motion: reduce) { .opb-pp__foil { transform: none !important; transition: none; } }
@media (max-width: 1099px) {
	.opb-fight__copy { grid-column: 1 / span 6; }
	.opb-fight__packs { grid-column: 7 / span 6; }
	.opb-ppfan { transform: scale(.85); transform-origin: 50% 100%; }
}
/* phone: the art is a band on top with Allen's face centred; one still pack; no fan, no opening */
@media (max-width: 781px) {
	.opb-fight { display: block; min-height: 0; padding-top: 0; }
	.opb-fight__art { position: relative; inset: auto; z-index: 0; height: 260px; }
	.opb-fight__art img { --aw: max(150cqw, 151.6cqh); top: clamp(calc(100cqh - var(--aw) * .66), calc(45cqh - var(--aw) * .66 * .315), 0px); -webkit-mask-image: none; mask-image: none; }
	.opb-fight__art::before { display: none; }
	.opb-fight__art::after { background: linear-gradient(0deg, var(--wp--preset--color--ground) 0%, rgba(6, 12, 36, 0) 32%); }
	.opb-fight__grid { display: block; padding-top: 24px; }
	.opb-fight__packs { display: none; }
	.opb-fight__still { display: block; position: absolute; right: 4px; top: -132px; width: 104px; height: auto; z-index: 3; transform: rotate(8deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .6)); }
	.opb-fight__copy .is-style-eyebrow { max-width: 62%; }
	.opb-fight__body { margin-bottom: 0; }
	.opb-fight__actions { margin-top: 24px; }
	.opb-fight__credit { right: auto; left: 12px; top: 220px; bottom: auto; }
}

/* ---------- 7 Pick where to start (patterns/global-start.php): eight picture tiles, the whole tile the link ---------- */
.opb-start .oph-h2 { margin-bottom: 40px; }
.opb-start__grid { list-style: none; margin: 0; padding: 0; }
.opb-start__grid > li { display: flex; }
.opb-tile { display: flex; flex-direction: column; width: 100%; overflow: hidden; text-decoration: none; color: var(--wp--preset--color--text); transition: border-color 150ms cubic-bezier(.2, .8, .2, 1); }
.opb-tile:hover { border-color: var(--wp--preset--color--cyan); }
.opb-tile__im { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--ground); border-bottom: 1px solid var(--wp--custom--line--panel); }
.opb-tile__im--table { background: radial-gradient(80% 70% at 50% 85%, #16296A 0%, #070F2C 55%, #040919 100%); }
.opb-tile__cov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opb-tile__fit { position: absolute; inset: 12px; display: flex; align-items: center; justify-content: center; }
.opb-tile__fit img { height: 100%; width: auto; min-width: 0; border-radius: 4px; box-shadow: 0 8px 16px rgba(0, 0, 0, .55); }
.opb-tile__fit img:only-child { box-shadow: none; border-radius: 0; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.opb-tile__tx { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.opb-tile__t { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title); line-height: .9; text-transform: uppercase; }
.opb-tile__t--ext::after { content: "\2197"; margin-left: 4px; font-size: .85em; }
.opb-start .oph-caption { margin-top: 16px; }
@media (max-width: 781px) {
	.opb-start .oph-h2 { margin-bottom: 24px; }
	.opb-start__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.opb-tile__tx { padding: 12px; }
	.opb-tile__t { font-size: 24px; }
}

/* ---------- Know your cards (patterns/global-cards.php; Mr Manager 28 Oct): the two card guides as picture tiles on a Band ---------- */
.opb-cards__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: center; }
.opb-cards__head .oph-h2 { margin: 0 0 12px; }
.opb-cards__head .is-style-muted { margin: 0; }
.opb-cards__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.opb-cards__tiles > li { display: flex; }
.opb-cards__fan { display: flex; align-items: center; justify-content: center; }
.opb-cards__c { position: absolute; top: 14%; height: 72%; width: auto; border-radius: 4px; box-shadow: 0 8px 16px rgba(0, 0, 0, .55); left: calc(16% + var(--i) * 15%); transform: rotate(calc((var(--i) - 1.5) * 6deg)); transform-origin: 50% 120%; transition: transform 200ms cubic-bezier(.2, .8, .2, 1); }
.opb-cards__c--land { height: auto; width: 34%; top: 30%; left: 6%; }
.opb-tile:hover .opb-cards__c { transform: rotate(calc((var(--i) - 1.5) * 9deg)) translateY(-6px); }
.opb-cards__rar .opb-tile__cov { object-position: 30% 20%; filter: brightness(.8); }
.opb-cards__marks { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 10px; background: linear-gradient(180deg, rgba(4, 9, 25, 0), rgba(4, 9, 25, .9) 40%); }
.opb-cards__marks img { height: 42px; width: auto; border-radius: 3px; }
.opb-cards__credit { margin-top: 16px; text-align: right; }
@media (max-width: 781px) {
	.opb-cards__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.opb-cards__tiles { gap: 12px; }
	.opb-cards__marks { gap: 3px; padding: 6px; }
	.opb-cards__marks img { height: 28px; }
	.opb-cards__credit { text-align: left; }
}

/* ---------- Creators (patterns/global-creators.php) ---------- */
.opb-creators { background: var(--wp--preset--color--deep); }
.opb-creators__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.opb-kit { grid-column: 1 / span 5; position: relative; height: 440px; border-radius: 4px; border: 1px solid var(--wp--custom--line--panel); background: radial-gradient(120% 90% at 50% 100%, #1B3287 0%, #0B1740 62%); overflow: hidden; }
.opb-kit__tag { position: absolute; left: 16px; top: 16px; z-index: 3; padding: 6px 12px 4px; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: var(--wp--preset--font-size--label); line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--yellow-ink); background: var(--wp--preset--color--yellow); border-radius: 2px; }
.opb-kit__vis { position: absolute; inset: 0; }
.opb-kit__vis img { position: absolute; display: block; height: auto; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .6)); }
.opb-kit__dk1 { left: 9%; bottom: 15%; width: 38%; transform: rotate(-6deg); }
.opb-kit__dk2 { left: 32%; bottom: 18%; width: 38%; transform: rotate(5deg); }
.opb-kit__bp { width: 19%; bottom: 12%; transform-origin: 50% 100%; }
.opb-kit__b1 { right: 27%; transform: rotate(-12deg); }
.opb-kit__b2 { right: 17%; }
.opb-kit__b3 { right: 7%; transform: rotate(12deg); }
.opb-creators__copy { grid-column: 7 / span 6; display: flex; flex-direction: column; }
.opb-creators__copy .opb-lead { margin-bottom: 24px; }
.opb-creators__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0 0 40px; padding-left: 20px; }
.opb-creators__vids { list-style: none; margin: 56px 0 0; padding: 0; }
.opb-vid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.opb-vid__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--wp--preset--color--panel); border: 1px solid var(--wp--custom--line--panel); display: flex; align-items: center; justify-content: center; }
.opb-vid__play { width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #B9A912, 0 14px 24px rgba(0, 0, 0, .6); }
.opb-vid__tn { position: absolute; left: 12px; bottom: 12px; right: 12px; }
.opb-vid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opb-vid__img ~ .opb-vid__play { position: relative; z-index: 1; }
.opb-vid__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opb-vid__meta .oph-caption { margin: 0; }
.opb-vid__name { font-size: var(--wp--preset--font-size--small); line-height: 1.3; font-weight: 600; }
@media (max-width: 1023px) {
	.opb-kit, .opb-creators__copy { grid-column: 1 / -1; }
	.opb-kit { margin-bottom: 24px; }
}
@media (max-width: 781px) {
	.opb-kit { height: 230px; }
	.opb-kit__tag { left: 12px; top: 12px; }
	.opb-creators__list { margin-bottom: 24px; }
	.opb-creators__vids { margin-top: 24px; grid-template-columns: 1fr; }
	.opb-vid__play { width: 44px; height: 44px; }
}

/* ---------- Why OverPower, mini (patterns/global-why-mini.php): the Home version before 12 Oct ---------- */
.opb-whymini { background: var(--wp--preset--color--panel-2); }
.opb-whymini__head { text-align: center; }
.opb-whymini__head .is-style-eyebrow { justify-content: center; }
.opb-whymini__head .is-style-subline { margin: 12px 0 40px; }
.opb-whymini__grid { list-style: none; margin: 0; padding: 0; }
.opb-whymini__tile { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.opb-whymini__tile .oph-small { margin: 0; }
/* 27 Oct (Mr Manager): the packs bigger (31% → 37% of the tile, the row 150 → 170 px), each floating out of step, and the shared lift on
   hover (.sf-lift: rises, glows yellow, comes to the front). The float is on the wrapper, the lift on the picture, so the two add up. */
.opb-whymini__packs { display: flex; justify-content: center; align-items: flex-end; height: 170px; }
.opb-whymini__pk { position: relative; display: block; width: 37%; flex: none; }
.opb-whymini__pk:hover { z-index: 20; }
.opb-whymini__pk img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.opb-whymini__pk:nth-child(1) img { transform: rotate(-16deg) translate(18%, 4%); }
.opb-whymini__pk:nth-child(2) { z-index: 1; }
.opb-whymini__pk:nth-child(2) img { transform: translateY(-6%); }
.opb-whymini__pk:nth-child(3) img { transform: rotate(16deg) translate(-18%, 4%); }
.opb-whymini__icons { display: grid; grid-template-columns: repeat(2, 56px); gap: 10px; justify-content: center; height: 170px; align-content: center; }
.opb-whymini__icons img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.opb-whymini__word { display: flex; align-items: center; height: 170px; font-family: var(--wp--preset--font-family--display); font-size: 64px; line-height: .86; text-transform: uppercase; 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; }
.opb-whymini__card { display: flex; align-items: center; height: 170px; }
.opb-whymini__card .op-foil { width: 150px; border-radius: 6px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.opb-whymini__card .op-foil img { width: 100%; border-radius: 6px; }
.opb-whymini__t { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: var(--wp--preset--font-size--title); line-height: 1.05; letter-spacing: .02em; text-transform: none; color: var(--wp--preset--color--text); text-shadow: none; }
.opb-whymini__t2 { font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
	.opb-whymini__head .is-style-subline { margin-bottom: 24px; }
	.opb-whymini__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.opb-whymini__tile { padding: 16px 12px; gap: 12px; }
	.opb-whymini__packs, .opb-whymini__icons, .opb-whymini__word, .opb-whymini__card { height: 96px; }
	.opb-whymini__icons { grid-template-columns: repeat(2, 34px); gap: 8px; }
	.opb-whymini__icons img { width: 34px; height: 34px; }
	.opb-whymini__word { font-size: 40px; }
	.opb-whymini__card .op-foil { width: 96px; }
	.opb-whymini__t { font-size: 22px; }
	.opb-whymini__t2 { font-size: var(--wp--preset--font-size--caption); }
	/* the bigger packs are a desktop thing: on phones they keep their old size, with room to float inside the tile */
	.opb-whymini__pk { width: 29%; }
	.opb-whymini { --fl: 4px; }
}
/* ---------- Why OverPower, mini: motion (Mr Manager, 27 Oct). Starts when the block is on screen (global.js adds .is-live). ---------- */
@keyframes opb-bob { from { translate: 0 0; } to { translate: 0 calc(var(--fl, 7px) * -1); } }
.opb-whymini.is-live .opb-whymini__pk { animation: opb-bob 2.8s ease-in-out infinite alternate; }
.opb-whymini.is-live .opb-whymini__pk:nth-child(2) { animation-delay: -.9s; }
.opb-whymini.is-live .opb-whymini__pk:nth-child(3) { animation-delay: -1.8s; }
.opb-whymini.is-live .opb-whymini__icons img { animation: opb-bob 2.4s ease-in-out infinite alternate; }
.opb-whymini.is-live .opb-whymini__icons img:nth-child(2) { animation-delay: -.6s; }
.opb-whymini.is-live .opb-whymini__icons img:nth-child(3) { animation-delay: -1.2s; }
.opb-whymini.is-live .opb-whymini__icons img:nth-child(4) { animation-delay: -1.8s; }
/* "Multiple formats": a comic pop and a yellow glow, every 5 s */
@keyframes opb-pop { 0%, 18%, 100% { scale: 1; rotate: 0deg; } 5% { scale: 1.16; rotate: -3deg; } 10% { scale: .96; rotate: 1.5deg; } 14% { scale: 1.03; rotate: 0deg; } }
@keyframes opb-glow { 0%, 22%, 100% { filter: none; } 6% { filter: drop-shadow(0 0 14px rgba(255, 228, 92, .9)) brightness(1.15); } }
.opb-whymini.is-live .opb-whymini__word { animation: opb-pop 5s cubic-bezier(.2, .8, .2, 1) 1s infinite, opb-glow 5s ease 1s infinite; }
/* The Invincible card: zooms out bigger, shakes, settles back, while a shine crosses its foil; every 5 s, half a beat after the formats pop */
@keyframes opb-zoomshake { 0%, 30%, 100% { scale: 1; rotate: 0deg; } 7% { scale: 1.22; rotate: 0deg; } 10% { rotate: -3deg; } 13% { rotate: 3deg; } 16% { rotate: -2deg; } 19% { scale: 1.22; rotate: 1.5deg; } 25% { scale: 1; rotate: 0deg; } }
@keyframes opb-sweep { 0%, 5% { background-position: 100% 0; opacity: 0; } 9% { opacity: 1; } 24% { background-position: 0% 0; opacity: 1; } 28%, 100% { background-position: 0% 0; opacity: 0; } }
.opb-whymini__card .op-foil { z-index: 2; }
.opb-whymini__sweep { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; -webkit-mask-image: var(--foil); mask-image: var(--foil); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: screen;
	background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 100% 0; }
.opb-whymini.is-live .opb-whymini__card .op-foil { animation: opb-zoomshake 5s cubic-bezier(.2, .8, .2, 1) 3.5s infinite; }
.opb-whymini.is-live .opb-whymini__sweep { animation: opb-sweep 5s ease-in-out 3.5s infinite; }
/* Reduce Motion: no pop, zoom or shake; the float (smaller and slower), the glow and the shine stay (Mr Manager, 27 Oct: "leave things that are very
   smooth and nice"). !important because base.css switches every animation off with Reduce Motion. */
@media (prefers-reduced-motion: reduce) {
	.opb-whymini.is-live .opb-whymini__pk, .opb-whymini.is-live .opb-whymini__icons img { --fl: 3px; animation: opb-bob 4s ease-in-out infinite alternate !important; }
	.opb-whymini.is-live .opb-whymini__pk:nth-child(2), .opb-whymini.is-live .opb-whymini__icons img:nth-child(2) { animation-delay: -1s !important; }
	.opb-whymini.is-live .opb-whymini__pk:nth-child(3), .opb-whymini.is-live .opb-whymini__icons img:nth-child(3) { animation-delay: -2s !important; }
	.opb-whymini.is-live .opb-whymini__icons img:nth-child(4) { animation-delay: -3s !important; }
	.opb-whymini.is-live .opb-whymini__word { animation: opb-glow 5s ease 1s infinite !important; }
	.opb-whymini.is-live .opb-whymini__card .op-foil { animation: none !important; }
	.opb-whymini.is-live .opb-whymini__sweep { animation: opb-sweep 5s ease-in-out 3.5s infinite !important; }
}

/* ---------- Rules and resources (patterns/global-resources.php). v5A, Mr Manager 20 Oct ("5a"; canvas "OverPower Rule Books", board 7A).
   Two document tiles and the Resources tile, 7 : 7 : 5. The tile is the Cards hub's "Guides and tools" tile (cards.css .ops-guide):
   textured card stock, yellow top edge, picture area 150 px, Niagara 30 yellow title, 16 px muted line; Open as the Resources hub's.
   1099 down: the two documents 2-up, the Resources tile a band under them. 781 down: as the phone board (picture on top, no line). ---------- */
.op-resources__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.op-resources__tile { padding: 0; } /* the striped tile: "Page rhythm" at the end of this file */
.op-resources__link { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 24px; align-items: start; align-content: start; height: 100%; padding: 24px; color: inherit; text-decoration: none; }
.op-resources__img { position: relative; width: 116px; height: 150px; }
.op-resources__img .opr-cover { width: 116px; box-shadow: 0 0 0 1px rgba(92, 225, 230, .18), 0 16px 28px -10px rgba(0, 0, 0, .9); }
.op-resources__card { position: absolute; left: 20px; top: 22px; width: 76px; height: auto; border-radius: 4px; transform-origin: 50% 100%; box-shadow: 0 0 0 1px rgba(92, 225, 230, .18), 0 10px 18px -6px rgba(0, 0, 0, .9); }
.op-resources__card:nth-child(1) { transform: translateX(-10px) rotate(-8deg); }
.op-resources__card:nth-child(2) { transform: translateX(10px) rotate(8deg); }
.op-resources__txt { display: flex; flex-direction: column; min-width: 0; }
.op-resources__title { margin: 0 0 8px; color: var(--wp--preset--color--yellow); }
.op-resources__line { display: block; }
.op-resources__open { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 32px; margin-top: 12px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--cyan); }
.op-resources__open::after { content: "\2192"; }
.op-resources__link:hover .op-resources__title, .op-resources__link:focus-visible .op-resources__title { color: var(--wp--preset--color--text); }
.op-resources__link:hover .op-resources__open, .op-resources__link:focus-visible .op-resources__open { color: var(--wp--preset--color--yellow); }
.op-resources__all { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 24px; }
.op-resources__allline { margin: 0; font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--text); }
.op-resources__all .wp-block-buttons { margin: 0; }
@media (max-width: 1099px) {
	.op-resources__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.op-resources__all { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 781px) {
	/* As the Resources hub's rule-book tiles on phone: the cover the tile's full width, title under it, Open on the tile's foot so the two line up. */
	.op-resources__tiles { gap: 16px; }
	.op-resources__link { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
	.op-resources__img { width: 100%; height: auto; aspect-ratio: 612 / 792; }
	.op-resources__img .opr-cover { width: 100%; }
	.op-resources__card { left: 17%; top: 14%; width: 66%; border-radius: 4px; }
	.op-resources__card:nth-child(1) { transform: translateX(-10px) rotate(-8deg); }
	.op-resources__card:nth-child(2) { transform: translateX(10px) rotate(8deg); }
	.op-resources__txt { flex: 1 1 auto; }
	.op-resources__title { font-size: 24px; line-height: 22px; }
	.op-resources__line { display: none; }
	.op-resources__open { margin-top: auto; padding-top: 12px; }
	.op-resources__all { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
	.op-resources__allline { font-size: 18px; line-height: 1.6; }
	.op-resources__all .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.op-resources__all .wp-block-button { margin: 0; }
	.op-resources__all .wp-block-button__link { width: 100%; box-sizing: border-box; }
}

/* ---------- The rule-book cover (moved from resources.css, 20 Oct: the Rules and resources block shows it on every page) ----------
   Page 1 of every rule-book PDF, the hero's book, the hub's tiles and this block: the rule book's skyline art and logo, the title in the
   cover's yellow-to-orange, the edition at the foot. Container units: everything scales with the cover's width. */
@font-face { font-family: 'Roboto Condensed'; font-weight: 300; font-display: swap; src: url(../fonts/roboto-condensed-latin-300.woff2) format('woff2'); }
@font-face { font-family: 'Roboto Condensed'; font-weight: 700; font-display: swap; src: url(../fonts/roboto-condensed-latin-700.woff2) format('woff2'); }

.opr-cover { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 612 / 792; overflow: hidden; border-radius: 2px; background: #0A1A6A; box-shadow: 0 0 0 1px rgba(92, 225, 230, .18), 0 30px 60px -20px rgba(0, 0, 0, .9); }
.opr-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opr-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 60, .18) 0%, rgba(4, 12, 60, .1) 35%, rgba(3, 8, 48, .55) 75%, rgba(2, 6, 36, .8) 100%); }
.opr-cover__t { position: absolute; z-index: 1; left: 0; right: 0; margin: 0; display: flex; flex-direction: column; align-items: center; font-family: 'Roboto Condensed', var(--wp--preset--font-family--label); font-weight: 700; text-transform: uppercase; line-height: .9; text-align: center; }
.opr-cover__t span { display: block; white-space: nowrap; color: #FFD400; background: linear-gradient(180deg, #FFF35C 0%, #FFE100 40%, #FFB400 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .4cqw .9cqw rgba(0, 0, 30, .55)); }
.opr-cover__t small { font-size: .55em; vertical-align: .45em; }
.opr-cover__t u { font-size: .62em; vertical-align: .38em; text-decoration-thickness: .09em; text-underline-offset: .12em; text-decoration-color: #FFE100; }
.opr-cover__ed { position: absolute; z-index: 1; left: 0; right: 0; bottom: 3.6%; margin: 0; text-align: center; font-family: 'Roboto Condensed', var(--wp--preset--font-family--body); font-weight: 300; font-size: 1.55cqw; letter-spacing: .06em; color: #EAF1FF; }

/* ---------- On this page: the sticky jump bar (.opl-nav). One component for every page that has one.
   Markup: overpower_onpage_nav() (inc/blocks.php); behaviour: global.js ("On this page"). Moved from learn.css, 23 Oct.
   26 Oct (Mr Manager, 00:59 and 01:07): one row (links, then the page's buttons) that swipes on a phone, nothing pinned; a yellow
   arrow over a fade at the edge that has more; a first-time glide; a tapped link lands right under the bar and lights up. ---------- */
.opl-nav { position: sticky; top: var(--op-head-h, 0px); z-index: 60; background: rgba(4, 9, 25, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-top: 1px solid var(--wp--custom--line--divider); border-bottom: 1px solid var(--wp--custom--line--divider); box-shadow: 0 8px 16px rgba(0, 0, 0, .35); }
/* Anchors on a page with the bar land with their top right under it: the header and the bar together (--opl-h: the bar's height,
   set by global.js), and no section adds its own margin. The highlight's line (global.js) is that same spot, so it lights at once. */
html:has(.opl-nav) { scroll-padding-top: calc(var(--op-head-h, 0px) + var(--opl-h, 58px)); }
html:has(.opl-nav) main [id] { scroll-margin-top: 0; }
.opl-nav__in { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.opl-nav__label { flex: none; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.opl-nav__rail { position: relative; flex: 1; min-width: 0; display: flex; align-self: stretch; }
.opl-nav__track { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; }
.opl-nav__track::-webkit-scrollbar { display: none; }
.opl-nav__list { flex: none; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.opl-nav__a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; border-bottom: 3px solid transparent;
	font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #C9D6EE; transition: color 120ms ease, border-color 120ms ease; }
.opl-nav__a:hover { color: var(--wp--preset--color--text); }
.opl-nav__a:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: -2px; }
.opl-nav__a[aria-current] { color: var(--wp--preset--color--yellow); border-bottom-color: var(--wp--preset--color--yellow); }
.opl-nav__btns { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.opl-nav__cta { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 4px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink, #060C24);
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.opl-nav__cta::after { content: " ↗"; }
.opl-nav__cta:focus-visible { outline: 2px solid var(--wp--preset--color--text); outline-offset: 2px; }
/* Small buttons (Start here, Mr Manager 24 Oct 00:17) */
.opl-nav__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 4px; white-space: nowrap; text-decoration: none;
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transition: background-color 120ms ease, color 120ms ease; }
.opl-nav__btn--primary { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink, #060C24); }
.opl-nav__btn--outline { border: 1px solid var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); }
.opl-nav__btn--outline:hover { background: rgba(240, 228, 55, .12); }
.opl-nav__btn.is-external::after { content: " ↗"; white-space: pre; }
.opl-nav__btn:focus-visible { outline: 2px solid var(--wp--preset--color--text); outline-offset: 2px; }
.opl-nav--quick .opl-nav__a { padding: 0 10px; }
/* The arrows: shown only on the side with more (is-more-l / is-more-r, set by global.js), each over a fade into the bar's ground. */
.opl-nav__arr { position: absolute; top: 0; bottom: 0; z-index: 2; display: none; align-items: center; width: 48px; margin: 0; padding: 0; border: 0; cursor: pointer;
	color: var(--wp--preset--color--yellow); background: transparent; -webkit-tap-highlight-color: transparent; }
.opl-nav__arr svg { flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.opl-nav__arr--r { right: 0; justify-content: flex-end; padding-right: 8px; background: linear-gradient(90deg, rgba(4, 9, 25, 0) 0%, rgba(4, 9, 25, .96) 55%); }
.opl-nav__arr--l { left: 0; justify-content: flex-start; padding-left: 8px; background: linear-gradient(270deg, rgba(4, 9, 25, 0) 0%, rgba(4, 9, 25, .96) 55%); }
.opl-nav__arr--l svg { transform: scaleX(-1); }
.opl-nav.is-more-l .opl-nav__arr--l, .opl-nav.is-more-r .opl-nav__arr--r { display: flex; }
.opl-nav__arr:hover svg { color: var(--wp--preset--color--text); }
.opl-nav__short { display: none; }
@media (max-width: 781px) {
	html:has(.opl-nav) { scroll-padding-top: calc(var(--op-head-h, 0px) + var(--opl-h, 50px)); }
	.opl-nav__in { gap: 8px; min-height: 48px; padding-right: 0; }
	.opl-nav__label { display: none; }
	.opl-nav__track { gap: 8px; padding-right: 16px; }
	.opl-nav__a { padding: 0 10px; font-size: 14px; }
	.opl-nav__cta { min-height: 32px; padding: 0 10px; font-size: 12px; }
	.opl-nav__btn { min-height: 32px; padding: 0 10px; font-size: 12px; }
	.opl-nav__arr { width: 44px; }
	.opl-nav__full { display: none; }
	.opl-nav__short { display: inline; }
	/* Four links or fewer and no buttons: every label shows in full on a phone, spread across the bar (Mr Manager, 23 Oct). */
	.opl-nav--fit .opl-nav__in { padding-right: 16px; }
	.opl-nav--fit .opl-nav__track { overflow: visible; padding-right: 0; }
	.opl-nav--fit .opl-nav__list { flex: 1; justify-content: space-between; gap: 0; }
	.opl-nav--fit .opl-nav__a { padding: 0 4px; font-size: 12px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
	.opl-nav__track { scroll-behavior: auto; }
}

/* ================= Page rhythm (Mr Manager, 23 Oct 19:25: "implement this on all pages except for the home page") =================
   Canvas "OverPower Web – Page Rhythm"; claude/design-rules.md section 4b. Every section of a page (Home excepted, until its overhaul)
   carries one surface class:
   - sf-stage   black, lit from below, the bright cyan dots under the content (the Cards spotlight). Always the first section after a hero.
   - sf-ground  the navy with the faint cyan dots (the page ground shows through). The reading surface. Two in a row at most.
   - sf-band    the brighter navy slab, hairline edges. One per page.
   - sf-feature full-bleed key art or the red banner; thin edges, no ground of its own.
   Seams: the crimp only under a hero and the Lazarus Chamber; Stage to Ground and back fade over 160 px (never a hard colour cut);
   Ground to Ground the 1 px line. sf-from-black: a Ground that starts after black where the sibling rule can't see it.
   Events keeps its dull green and burgundy sections (his ruling, 23 Oct): the one exception. ---------- */
section.sf-stage, section.sf-ground, section.sf-band, section.sf-feature { position: relative; }
:where(section.sf-stage, section.sf-ground, section.sf-band, section.sf-feature) { border-top: 0; }
section.sf-stage {
	--sf-top: none;
	background:
		var(--sf-top),
		radial-gradient(60% 440px at 50% min(64%, 520px), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 55%, #000 100%),
		radial-gradient(rgba(92, 225, 230, .24) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
		radial-gradient(72% 560px at 50% min(64%, 520px), rgba(22, 41, 106, .95) 0%, rgba(7, 15, 44, .7) 48%, rgba(0, 0, 0, 0) 100%),
		#000;
}
/* A Stage that follows a Ground, Band or Feature rises out of it: navy at the top, black by 160 px. */
.sf-ground + section.sf-stage, .sf-band + section.sf-stage, .sf-feature + section.sf-stage, .sf-stage.sf-from-navy { --sf-top: linear-gradient(180deg, #060C24 0, rgba(6, 12, 36, 0) 160px); }
section.sf-ground { background: transparent; }
/* After black (a Stage, the crimp of a hero or the Lazarus Chamber) the dots surface out of it over 160 px. */
.sf-stage + section.sf-ground, .is-style-crimp + section.sf-ground, .is-style-on-black + section.sf-ground, section.sf-ground.sf-from-black { background: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 160px); }
.sf-ground + section.sf-ground { border-top: 1px solid var(--wp--custom--line--divider); }
section.sf-band {
	background: linear-gradient(180deg, #16275F 0%, var(--wp--preset--color--panel-2) 100%);
	border-top: 1px solid rgba(92, 225, 230, .22);
	border-bottom: 1px solid rgba(92, 225, 230, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
section.sf-feature { border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sf-band + .sf-feature, .sf-feature + .sf-band { border-top-color: rgba(92, 225, 230, .22); }
/* Join the community after a black or crimp ending: the same fade into its panel. */
.wp-site-blocks:has(> main > section:last-child:is(.sf-stage, .is-style-crimp)) .op-community { box-shadow: inset 0 160px 120px -80px #000; }

/* ---------- Shared parts: one rule each (canvas sheet "Parts"). ---------- */
/* 1. The Power strip: the four Power Grid colours under the first section title of the page (placed by overpower_rhythm(), inc/blocks.php). */
.sf-strip, .opc-strip { display: flex; gap: 6px; margin-top: 16px; }
.sf-strip + :is(p, div, ul, ol) { margin-top: 16px; }
.sf-strip i, .opc-strip i { display: block; width: 40px; height: 6px; transform: skewX(-24deg); background: var(--wp--preset--color--energy); }
.sf-strip i:nth-child(2), .opc-strip i:nth-child(2) { background: var(--wp--preset--color--combat); }
.sf-strip i:nth-child(3), .opc-strip i:nth-child(3) { background: var(--wp--preset--color--brute-force); }
.sf-strip i:nth-child(4), .opc-strip i:nth-child(4) { background: var(--wp--preset--color--intelligence); }
.oph-sechead--center .sf-strip, .is-center .sf-strip { justify-content: center; }
/* The Power strip lock (Home only; inc/blocks.php overpower_strip_lock_html(), global.js "The Power strip lock"; Mr Manager 27–28 Oct):
   each colour is a button whose 44 px tap area does not move the layout; it glows dully when lit, ripples as it comes into view,
   greys on a wrong tap; the right four glitch the page before it goes to /1996/. */
.sf-strip--lock { gap: 0; }
.sf-strip--lock button { --c: var(--wp--preset--color--energy); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 46px; height: 44px; margin: -19px 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-strip--lock button:nth-child(2) { --c: var(--wp--preset--color--combat); }
.sf-strip--lock button:nth-child(3) { --c: var(--wp--preset--color--brute-force); }
.sf-strip--lock button:nth-child(4) { --c: var(--wp--preset--color--intelligence); }
.sf-strip--lock button i { background: var(--c); transition: filter .18s, box-shadow .18s, translate .18s; }
.sf-strip--lock button:focus-visible { outline: 2px dashed var(--wp--preset--color--yellow); outline-offset: -6px; }
.sf-strip--lock button.is-on i { filter: brightness(1.18) saturate(.75); box-shadow: 0 0 9px 2px color-mix(in srgb, var(--c) 40%, transparent); translate: 0 -2px; }
.sf-strip--lock.is-wake button i { animation: sf-lock-ripple .5s ease-in-out both; }
.sf-strip--lock.is-wake button:nth-child(2) i { animation-delay: .08s; }
.sf-strip--lock.is-wake button:nth-child(3) i { animation-delay: .16s; }
.sf-strip--lock.is-wake button:nth-child(4) i { animation-delay: .24s; }
.sf-strip--lock.is-wrong button i { filter: grayscale(1) brightness(.55); }
.sf-strip--lock.is-win button i { filter: brightness(1.15) saturate(.8); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--c) 45%, transparent); }
@keyframes sf-lock-ripple { 0%, 100% { translate: 0 0; filter: none; } 45% { translate: 0 -4px; filter: brightness(1.15) saturate(.8); } }
html.sf-lock-glitch body { animation: sf-lock-glitch .7s steps(1) both; }
@keyframes sf-lock-glitch {
	0% { translate: 0 0; filter: none; clip-path: none; }
	10% { translate: -10px 0; filter: hue-rotate(80deg) saturate(2); clip-path: inset(10% 0 55% 0); }
	20% { translate: 8px 3px; filter: invert(.15); clip-path: inset(38% 0 20% 0); }
	30% { translate: -4px -2px; filter: hue-rotate(-60deg) contrast(1.6); clip-path: none; }
	42% { translate: 12px 0; filter: saturate(3); clip-path: inset(0 0 68% 0); }
	55% { translate: -8px 1px; filter: hue-rotate(140deg); clip-path: inset(60% 0 6% 0); }
	70% { translate: 4px 0; filter: contrast(2) brightness(1.3); clip-path: none; }
	85% { translate: -2px 0; filter: hue-rotate(30deg); }
	100% { translate: 0 0; filter: none; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sf-strip--lock.is-wake button i { animation: none; }
	html.sf-lock-glitch body { animation: sf-lock-fade .6s ease both; }
	@keyframes sf-lock-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
}
/* 2. The striped tile: every tile that links somewhere (the Cards "Guides and tools" tile). Card stock, diagonal lines, yellow top edge. */
.ops-guide, .opr-guide, .op-resources__tile, .sf-tile,
.opl-fmt__tile, .opb-tile, .fmt-tile, .fmt-glance__tile, .opp-prog {
	position: relative; overflow: hidden;
	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%);
}
.ops-guide::before, .opr-guide::before, .op-resources__tile::before, .sf-tile::before,
.opl-fmt__tile::before, .opb-tile::before, .fmt-tile::before, .fmt-glance__tile::before, .opp-prog::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--wp--preset--color--yellow); z-index: 2; pointer-events: none; }
/* 3. The ghost title: one per page, behind the title of a collection (the roster, the artists, the creator videos). data-ghost on .oph-sechead. */
.ops-ghost { position: relative; isolation: isolate; }
.ops-ghost::before { content: attr(data-ghost); position: absolute; left: -8px; bottom: -8px; z-index: -1; pointer-events: none; font-family: var(--wp--preset--font-family--display); font-weight: 300; font-size: 200px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(92, 225, 230, .13); white-space: nowrap; overflow: hidden; max-width: 100%; }
/* 4. The spotlight: built into sf-stage (above). */
/* 5. The yellow burst: the yellow halftone behind the title of every hero. */
.opc-burst, .ops-hero__wrap { position: relative; }
.opc-burst::before, .ops-hero__wrap::before { content: ""; position: absolute; left: -200px; top: 50%; width: 980px; height: 980px; margin-top: -490px; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(240, 228, 55, .26) 1.2px, transparent 1.6px); background-size: 13px 13px; -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 100%); }
/* 6. The lift: a pack, deck or product picture rises and glows yellow under the pointer (first on Formats' Limited packs, 22 Oct;
   one part for every product picture, Mr Manager 25 Oct: Formats' packs and starter decks, the Stores block, Retailer support).
   It moves with the translate property, so it adds to the picture's own transform (a fan, a tilt), and comes to the front
   (--lift-z keeps a picture that stands behind the others in its place).
   --lift-tone keeps a picture's own colour treatment while it glows. Hover only: a phone shows the still picture. */
.sf-lift { transition: translate 220ms cubic-bezier(.2, .8, .2, 1), filter 220ms ease; }
.sf-lift:hover { z-index: var(--lift-z, 20) !important; translate: 0 -10px; filter: var(--lift-tone,) drop-shadow(0 0 18px rgba(255, 228, 92, .85)) drop-shadow(0 16px 22px rgba(0, 0, 20, .6)) brightness(1.12); }
.opb-stores__scene img, .opb-scene img, .opb-retail__displays img { --lift-tone: contrast(1.14) saturate(1.18); }
.opb-stores__disp { --lift-z: 1; } /* the display stands behind the decks and packs: it glows in place, never in front of them */
@media (prefers-reduced-motion: reduce) { .sf-lift { transition: none; } .sf-lift:hover { translate: none; } }
@media (max-width: 781px) {
	.sf-strip i, .opc-strip i { width: 32px; height: 5px; }
	.sf-strip--lock button { width: 38px; }
	.ops-ghost::before { font-size: 96px; }
	.opc-burst::before, .ops-hero__wrap::before { left: -300px; width: 640px; height: 640px; margin-top: -320px; }
	section.sf-stage { background:
		var(--sf-top),
		radial-gradient(90% 360px at 50% min(60%, 420px), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 55%, #000 100%),
		radial-gradient(rgba(92, 225, 230, .24) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
		radial-gradient(100% 440px at 50% min(60%, 420px), rgba(22, 41, 106, .95) 0%, rgba(7, 15, 44, .7) 48%, rgba(0, 0, 0, 0) 100%),
		#000; }
}

/* ---------- The photo carousel (overpower_carousel(), inc/blocks.php; behaviour global.js). First on Organized Play, How it works. ---------- */
.op-car { position: relative; }
.op-car__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
	border-radius: 4px; border: 1px solid var(--wp--custom--line--panel); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); }
.op-car__track::-webkit-scrollbar { display: none; }
.op-car__track:focus-visible { outline: 3px solid var(--wp--preset--color--cyan); outline-offset: 3px; }
.op-car__slide { position: relative; scroll-snap-align: start; aspect-ratio: 8 / 5; background: var(--wp--preset--color--deep); }
.op-car__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.op-car__todo { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center;
	background: 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%); }
.op-car__cap { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 4px 8px; font-size: var(--wp--preset--font-size--caption); color: #DCE6F5; background: rgba(4, 9, 25, .8); border-radius: 2px; }
.op-car__btn { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
	color: var(--wp--preset--color--yellow); background: rgba(4, 9, 25, .78); border: 1px solid rgba(240, 228, 55, .5); border-radius: 50%; transition: background 150ms ease, color 150ms ease; }
.op-car__btn:hover { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); }
.op-car__btn:focus-visible { outline: 3px solid var(--wp--preset--color--cyan); outline-offset: 2px; }
.op-car__btn--prev { left: 16px; }
.op-car__btn--next { right: 16px; }
.op-car__btn[disabled] { opacity: .35; cursor: default; }
.op-car__dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.op-car__dot { width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.op-car__dot::after { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 4px; border-radius: 2px; background: rgba(169, 188, 226, .35); transition: background 150ms ease; }
.op-car__dot[aria-current]::after { background: var(--wp--preset--color--yellow); }
@media (max-width: 781px) {
	.op-car__btn { width: 44px; height: 44px; margin-top: -22px; }
	.op-car__btn--prev { left: 8px; }
	.op-car__btn--next { right: 8px; }
	.op-car__slide { aspect-ratio: 4 / 3; }
}

/* ---------- Pick where to start: tile pictures (Mr Manager 23 Oct 22:19; patterns/global-start.php) ---------- */
.opb-tile__im--rules .opb-tile__cov { object-position: 50% 100%; filter: brightness(.6) saturate(1.1); }
.opb-tile__book { position: absolute; left: 50%; top: 9%; width: 37%; transform: translateX(-50%) rotate(4deg); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); }
.opb-tile__map { object-position: 50% 50%; }
.opb-ka--low { transform: translateY(14%) scale(1.29); } /* lower (15 px at 22:19, more at 22:50); the zoom keeps the art's credit banner out of the frame */
.opb-tile__cov--head { object-position: 50% 12%; } /* Robot: his head in the frame (22:50) */
.opb-tile__cov--low { transform: translateY(9%) scale(1.15); transform-origin: 50% 100%; } /* the Flaxans a little lower (22:50) */
.opb-shop img { position: absolute; bottom: 7%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.opb-shop__s1 { height: 74%; left: 14%; z-index: 1; }
.opb-shop__p1, .opb-shop__p2 { height: 68%; }
.opb-shop__p1 { left: 50%; z-index: 2; transform: rotate(-7deg); }
.opb-shop__p2 { left: 64%; z-index: 3; transform: rotate(7deg); }

/* ---------- Character spotlight (patterns/global-spotlight.php; Mr Manager 14 Oct 16:50, ref-spotlight-widget.png). Moved from character.css 25 Oct ---------- */
.ops-spot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ops-spot__player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--wp--custom--radius--panel); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), var(--wp--preset--shadow--card); }
.ops-spot__poster { position: absolute; inset: 0; display: block; color: var(--wp--preset--color--text); text-decoration: none; }
.ops-spot__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ops-spot__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 36, 0) 50%, rgba(6, 12, 36, .75) 100%); }
.ops-spot__disc { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; z-index: 1; border-radius: 50%; background: var(--wp--preset--color--yellow); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: transform 150ms cubic-bezier(.2, .8, .2, 1); }
.ops-spot__disc::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--wp--preset--color--yellow-ink); }
.ops-spot__poster:hover .ops-spot__disc { transform: scale(1.06); }
.ops-spot__cap { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 1; text-align: center; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.ops-spot__player.is-playing .ops-spot__poster { display: none; }
.ops-spot__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ops-spot__list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 460px); overflow-y: auto; scrollbar-width: thin; }
.ops-spot__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px 8px 8px; border-radius: var(--wp--custom--radius--panel); background: linear-gradient(180deg, #132460 0%, var(--wp--preset--color--panel) 100%); border: 1px solid rgba(92, 225, 230, .18); color: var(--wp--preset--color--text); text-decoration: none; }
.ops-spot__item img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 4px; }
.ops-spot__item:hover, .ops-spot__item.is-current { border-color: var(--wp--preset--color--yellow); }
.ops-spot__item.is-current .ops-spot__name { color: var(--wp--preset--color--yellow); }
.ops-spot__name { font-weight: 600; font-size: 16px; }
.ops-spot__dur { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 781px) {
	.ops-spot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ops-spot__list { max-height: none; overflow: visible; padding: 0; }
	.ops-spot__disc { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
	.ops-spot__disc::after { left: 22px; top: 17px; border-width: 11px 0 11px 17px; }
	.ops-spot__cap { bottom: 12px; font-size: 16px; padding: 0 12px; }
}
.ops-spots { position: relative; overflow: hidden; } /* was in cards.css's list of Cards sections; now on every page that places the block */
/* Phones: the first four videos, then "Show all N videos" opens the rest (Mr Manager: Home 24 Oct 20:12; every placement 25 Oct). Behaviour: global.js. */
.ops-spot__more { display: none; }
@media (max-width: 781px) {
	.ops-spot__list > li:nth-child(n+5) { display: none; }
	.ops-spot__list.is-open > li { display: block; }
	.ops-spot__more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 16px; cursor: pointer;
		background: none; border: 1px solid rgba(92, 225, 230, .4); border-radius: 4px; color: var(--wp--preset--color--cyan);
		font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
	.ops-spot__more::after { content: "\2193"; }
	.ops-spot__more.is-open::after { content: "\2191"; }
}

/* ==================== Home overhaul versions, the blocks' own look since 25 Oct (moved from home2.css, where they were Home-only) ==================== */


/* ---------- Why OverPower, full: on a Stage, no panels, no die-cut boxes (Home overhaul, Mr Manager 24 Oct; the block's own look since 25 Oct, these rules override the die-cut ones above) ---------- */
.oph-why.sf-stage { padding-bottom: 96px; }
.oph-why .oph-center .sf-strip { justify-content: center; margin: 16px 0 0; }
.oph-why .oph-center .is-style-subline { margin-top: 16px; }
.oph-why .oph-w__edge, .oph-why .oph-w__edge--s { filter: none; }
.oph-why .oph-w__edge::before { display: none; }
.oph-why .oph-w__cut { background: none; clip-path: none; overflow: visible; }
.oph-why .oph-w__dots { display: none; }

/* 01 No Pay to Win: straight on the stage, bigger, with the yellow burst behind the pack */
.oph-why .oph-w__np { padding: 0; }
.oph-why .oph-w__stage { margin-top: 24px; isolation: isolate; }
.oph-why .oph-w__stage::before { content: ""; position: absolute; left: -14%; top: -30%; width: 66%; aspect-ratio: 1; z-index: -1; pointer-events: none;
	background-image: radial-gradient(rgba(240, 228, 55, .30) 1.3px, transparent 1.7px); background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 100%); }
.oph-why .oph-w__stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 18%; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(92, 225, 230, .22), rgba(92, 225, 230, 0)); }
.oph-why .oph-w__banner { opacity: .7; }
.oph-why .oph-w__npfoot { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(92, 225, 230, .18); }
.oph-why .oph-w__npfoot .oph-w__bd { font-size: 18px; line-height: 1.6; }

/* 02–04: three open columns on the stage, hairline dividers, big ghost numbers */
.oph-why .oph-w__trio { gap: 0; margin-top: 72px; border-top: 1px solid rgba(92, 225, 230, .18); }
.oph-why .oph-w__trio > .oph-w__edge { padding: 40px 40px 8px; }
.oph-why .oph-w__trio > .oph-w__edge:first-child { padding-left: 0; }
.oph-why .oph-w__trio > .oph-w__edge:last-child { padding-right: 0; }
.oph-why .oph-w__trio > .oph-w__edge + .oph-w__edge { border-left: 1px solid rgba(92, 225, 230, .18); }
.oph-why .oph-w__trio > .oph-w__edge::after { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; background: var(--wp--preset--color--yellow); }
.oph-why .oph-w__trio > .oph-w__edge + .oph-w__edge::after { left: 40px; }
.oph-why .oph-w__tile { padding: 0; }
.oph-why .oph-w__ghost { right: -4px; top: -14px; font-size: 168px; -webkit-text-stroke: 1.5px rgba(92, 225, 230, .16); }
.oph-why .oph-w__tt { font-size: 36px; }
.oph-why .oph-w__map { opacity: .28; right: -40px; top: 40px; }

/* ---------- Roster on a Stage: the cards in the spotlight, the ghost title behind ---------- */
.opb-expansion .oph-cardtile img { box-shadow: 0 0 0 1px rgba(92, 225, 230, .22), 0 30px 50px -18px rgba(0, 0, 0, .95), 0 0 60px -10px rgba(92, 225, 230, .25); }

/* ---------- Join us today: the shared striped tiles ---------- */
.opb-joinus .oph-panel.sf-tile { border: 1px solid rgba(92, 225, 230, .2); }

@media (max-width: 1023px) {
	.oph-why .oph-w__trio > .oph-w__edge, .oph-why .oph-w__trio > .oph-w__edge:first-child, .oph-why .oph-w__trio > .oph-w__edge:last-child { padding: 32px 0 8px; }
	.oph-why .oph-w__trio > .oph-w__edge + .oph-w__edge { border-left: 0; border-top: 1px solid rgba(92, 225, 230, .18); }
	.oph-why .oph-w__trio > .oph-w__edge + .oph-w__edge::after { left: 0; }
}
@media (max-width: 781px) {
	.oph-why.sf-stage { padding-bottom: 48px; }
	.oph-why .oph-w__np { padding: 0; }
	.oph-why .oph-w__stage::before { left: -30%; top: -10%; width: 110%; }
	.oph-why .oph-w__npfoot { margin-top: 24px; padding-top: 16px; }
	.oph-why .oph-w__npfoot .oph-w__bd { font-size: 16px; }
	.oph-why .oph-w__trio { margin-top: 40px; }
	.oph-why .oph-w__tile { padding: 0; }
	.oph-why .oph-w__ghost { font-size: 120px; }
	.oph-why .oph-w__tt { font-size: 30px; }
}

/* Roster: room above the head for the ghost title */
.oph-sec.opb-expansion { padding-top: 136px; }
@media (max-width: 781px) { .oph-sec.opb-expansion { padding-top: 88px; } }
/* 27 Oct (Mr Manager): the booster crimp closes the block under Shop Skybound (it moved here from the Lazarus Chamber); room for it below the buttons */
.oph-sec.opb-expansion.is-style-crimp { padding-bottom: calc(var(--wp--preset--spacing--50) + 96px); }
@media (max-width: 781px) { .oph-sec.opb-expansion.is-style-crimp { padding-bottom: 104px; } }

/* ---------- Why OverPower, full: 27 Oct (Mr Manager) ---------- */
/* The three tiles' text starts on one line: every tile's picture row is the same height, its content centred in it. */
@media (min-width: 1024px) {
	.oph-why .oph-w__vis { height: 112px; min-height: 0; display: flex; align-items: center; }
}
/* 03 The formats, without the big 5: each group's chips on one row */
.oph-why .oph-w__fmt { gap: 0; }
.oph-why .oph-w__fmt > div { gap: 6px; }
.oph-why .oph-w__fmt .oph-w__chips + .oph-w__grp { margin-top: 6px; }
.oph-why .oph-w__fmt .oph-w__chips span { padding: 6px 10px 4px; font-size: 15px; }
@media (min-width: 1024px) { .oph-why .oph-w__fmt .oph-w__chips { flex-wrap: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279px) {
	.oph-why .oph-w__trio > .oph-w__edge { padding-left: 24px; padding-right: 24px; }
	.oph-why .oph-w__trio > .oph-w__edge:first-child { padding-left: 0; }
	.oph-why .oph-w__trio > .oph-w__edge:last-child { padding-right: 0; }
	.oph-why .oph-w__trio > .oph-w__edge + .oph-w__edge::after { left: 24px; }
	.oph-why .oph-w__fmt .oph-w__chips span { padding: 6px 8px 4px; font-size: 14px; }
}
/* 04 Play Network: each number sits right beside its label */
.oph-why .oph-w__stats { gap: 6px; }
.oph-why .oph-w__stats div { gap: 10px; }
.oph-why .oph-w__stats dt { width: 58px; font-size: 38px; }
.oph-why .oph-w__stats dd { font-size: 16px; }
/* 02 The game: the four Power icons float, each a little out of step (still on with Reduce Motion, only a smaller drift) */
@keyframes oph-float { from { translate: 0 0; } to { translate: 0 calc(var(--fl, 7px) * -1); } }
.oph-why .oph-w__powers img { animation: oph-float 2.6s ease-in-out infinite alternate; }
.oph-why .oph-w__powers li:nth-child(2) img { animation-delay: -.65s; }
.oph-why .oph-w__powers li:nth-child(3) img { animation-delay: -1.3s; }
.oph-why .oph-w__powers li:nth-child(4) img { animation-delay: -1.95s; }
@media (prefers-reduced-motion: reduce) {
	.oph-why .oph-w__powers img { --fl: 3px; animation: oph-float 4s ease-in-out infinite alternate !important; }
	.oph-why .oph-w__powers li:nth-child(2) img { animation-delay: -1s !important; }
	.oph-why .oph-w__powers li:nth-child(3) img { animation-delay: -2s !important; }
	.oph-why .oph-w__powers li:nth-child(4) img { animation-delay: -3s !important; }
}

/* ---------- Phone: No Pay to Win cards spaced so the Ultra Rare no longer covers the Rare ---------- */
@media (max-width: 781px) {
	.oph-why .oph-w__stage { aspect-ratio: 358 / 660; margin-bottom: 150px; }
	.oph-why .oph-w__pack { --py: 2% !important; }
	.oph-why .oph-w__back { --py: 1% !important; }
	.oph-why .oph-w__card[data-w="c"] { --py: 4% !important; }
	.oph-why .oph-w__card[data-w="r"] { --px: 30% !important; --py: 33% !important; }
	.oph-why .oph-w__card[data-w="u"] { --px: 22% !important; --py: 62% !important; }
	.oph-why .oph-w__banner { top: 44%; }
}
/* the banner and the map are clipped by the section, so nothing scrolls sideways */
.oph-why { overflow-x: clip; }

/* Card Library hand on touch, /homepage2/ only while Mr Manager tests the phone motion (body.op-pm; behaviour global.js). Moved from home2.css 25 Oct. */
body.op-pm .oph-hand img { -webkit-tap-highlight-color: transparent; cursor: pointer; }
@media (hover: none), (max-width: 781px) {
	body.op-pm .oph-hand.has-up img { filter: brightness(.7) saturate(.9); }
	body.op-pm .oph-hand img.is-near { translate: calc(var(--side, 0) * 14px) 0; filter: brightness(.8); }
	body.op-pm .oph-hand img.is-up { z-index: 20; rotate: calc(var(--r) * -1); translate: calc(sin(var(--r)) * var(--rho)) calc((1 - cos(var(--r))) * var(--rho)); scale: 1.18; filter: none; box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 24px 40px rgba(0,0,0,.75); transition-delay: 0s; }
}
@media (max-width: 781px) { body.op-pm .oph-hand { --rho: 292px; } }

/* ==================== Create your team (patterns/global-builder.php; Characters and Start here, 30 Oct 16:56) ====================
   The mat with the six seats and the total (left), the picker (right). The picker is one box of its own: the tabs on top, the cards
   scrolling inside it; on a desktop it is as tall as the mat ("not too big … self-contained"). Behaviour: global.js. No blur. */
.opt-team__lead { margin: 0; max-width: 344px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; } /* the Characters version's line on how to pick */
.opt-team__lead--under { max-width: 640px; margin: -12px 0 24px; } /* the Expansions version: the line under the heading, the link on the right */
.opt-build { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; scroll-margin-top: 24px; } /* a shared link lands on it (Start here #team) */
.opt-mat { position: relative; padding: 20px; border: 1px solid var(--wp--custom--line--panel); border-radius: var(--wp--custom--radius--panel);
	background: linear-gradient(180deg, rgba(4, 9, 25, .78), rgba(4, 9, 25, .9)), var(--opt-mat, none) center / cover no-repeat, var(--wp--preset--color--panel);
	box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
.opt-shared { margin: 0 0 14px; font-family: var(--wp--preset--font-family--display); font-size: 30px; line-height: 1; color: var(--wp--preset--color--yellow); text-shadow: 0 3px 0 #000000; }
.opt-mat .opt-row__lab { margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; color: var(--wp--preset--color--muted); }
.opt-row { display: grid; gap: 10px; }
.opt-row--front { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.opt-row--back { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; } /* Battleground · Reserve · Home Base */
.opt-row--back .opt-cell { min-width: 0; }

/* A seat: an empty card outline, or the card with its name and a remove mark */
.opt-seat { position: relative; display: block; width: 100%; aspect-ratio: 620 / 444; margin: 0; padding: 0; border: 2px dashed rgba(169, 188, 226, .38); border-radius: 8px;
	background: rgba(4, 9, 25, .55); color: var(--wp--preset--color--muted); cursor: default; overflow: hidden; }
.opt-seat__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; text-align: center;
	font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; }
.opt-seat__opt { font-size: 11px; color: var(--wp--preset--color--dim); }
.opt-seat.is-next { border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); }
.opt-seat.is-full { border: 0; cursor: pointer; background: #000000; box-shadow: 0 6px 14px rgba(0, 0, 0, .55); }
.opt-seat.is-full .opt-seat__empty { display: none; }
.opt-seat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.opt-seat__x { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(4, 9, 25, .88); color: var(--wp--preset--color--text); font: 700 16px/1 var(--wp--preset--font-family--body); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.opt-seat:hover .opt-seat__x, .opt-seat:focus-visible .opt-seat__x { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); }
.opt-seat:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.opt-seat.is-drop img { animation: opt-drop 360ms cubic-bezier(.2, .8, .2, 1); }
@keyframes opt-drop { from { transform: translateY(-14px) scale(1.04); opacity: 0; } to { transform: none; opacity: 1; } }

/* The total: the Threat cog, black up to 76, red above with the asterisk line */
.opt-sum { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wp--custom--line--divider); }
.opt-cog { position: relative; flex: none; width: 64px; height: 64px; }
.opt-cog img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.opt-cog b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 24px/1 var(--wp--preset--font-family--body); letter-spacing: -.03em; color: #0A0A0A; transition: transform 250ms cubic-bezier(.2, .8, .2, 1), color 200ms ease; }
.opt-cog.tick b { transform: scale(1.18); }
.opt-sum__txt { min-width: 0; }
.opt-sum__line { margin: 0; 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--text); }
.opt-sum__of { color: var(--wp--preset--color--muted); }
.opt-sum__count { margin: 2px 0 0; }
.opt-sum__warn { margin: 4px 0 0; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; color: var(--wp--preset--color--error); }
.opt-sum.is-over .opt-cog b { color: #D0140C; }
.opt-sum.is-over .opt-sum__of { color: var(--wp--preset--color--error); }

.opt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.opt-btn { min-height: 44px; padding: 0 18px; border: 2px solid var(--wp--preset--color--text); border-radius: 0; background: transparent; color: var(--wp--preset--color--text); cursor: pointer;
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.opt-btn--primary { border-color: var(--wp--preset--color--yellow); background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink); }
.opt-btn:hover:not(:disabled) { border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); }
.opt-btn--primary:hover:not(:disabled) { background: #FFF36A; color: var(--wp--preset--color--yellow-ink); }
.opt-btn:disabled { opacity: .4; cursor: default; }
.opt-btn:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.opt-actions__note { color: var(--wp--preset--color--cyan); }
/* 31 Oct (Mr Manager): the red line to the Deck Builder, under Share and Clear, full width */
.opt-deck { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 12px; padding: 0 18px; background: #C8161E; box-shadow: 0 3px 0 #7A0C12; color: #fff; text-decoration: none; text-align: center;
	font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.opt-deck:hover { background: #A3121A; color: #fff; }
.opt-deck:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.opt-mat .opt-rules { margin: 14px 0 0; }

/* ---------- The picker: one box, the tabs on top, the cards scrolling inside ---------- */
.opt-pick { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--wp--custom--line--panel); border-radius: var(--wp--custom--radius--panel); background: rgba(4, 9, 25, .6); overflow: hidden; }
.opt-strip { display: none; }
.opt-tabs { flex: none; display: flex; gap: 6px; padding: 0 10px; border-bottom: 1px solid var(--wp--custom--line--divider); overflow-x: auto; scrollbar-width: none; }
.opt-tabs::-webkit-scrollbar { display: none; }
.opt-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 6px 14px 8px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; color: #C9D6EE; text-align: left; }
.opt-tab__n { font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.opt-tab__c { font-family: var(--wp--preset--font-family--body); font-size: 13px; color: var(--wp--preset--color--dim); }
.opt-tab[aria-selected="true"] { color: var(--wp--preset--color--yellow); border-bottom-color: var(--wp--preset--color--yellow); }
.opt-tab:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: -2px; }
.opt-panel { flex: 1 1 auto; min-height: 0; max-height: min(560px, 70vh); padding: 16px 16px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(169, 188, 226, .45) transparent; }
.opt-panel::-webkit-scrollbar { width: 8px; }
.opt-panel::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(169, 188, 226, .45); }
.opt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.opt-pc { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.opt-pc__img { position: relative; display: block; aspect-ratio: 620 / 444; border-radius: 8px; overflow: hidden; background: #000000; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); transition: transform 160ms ease, box-shadow 160ms ease; }
.opt-pc__img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.opt-pc:hover .opt-pc__img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--wp--preset--color--yellow), 0 10px 18px rgba(0, 0, 0, .6); }
.opt-pc:focus-visible { outline: none; }
.opt-pc:focus-visible .opt-pc__img { box-shadow: 0 0 0 3px var(--wp--preset--color--yellow); }
.opt-pc__name { margin-top: 8px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; color: var(--wp--preset--color--text); }
.opt-pc__t { margin-top: 2px; font-family: var(--wp--preset--font-family--body); font-size: 13px; color: var(--wp--preset--color--muted); }
/* On the team: dimmed with its seat on a yellow tag */
.opt-pc__seat { position: absolute; left: 6px; top: 6px; display: none; padding: 3px 8px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow-ink);
	font: 700 12px/1.2 var(--wp--preset--font-family--label); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.opt-pc[aria-pressed="true"] .opt-pc__seat { display: block; }
.opt-pc[aria-pressed="true"] .opt-pc__img { box-shadow: 0 0 0 3px var(--wp--preset--color--yellow); }
.opt-pc[aria-pressed="true"] .opt-pc__img img { opacity: .55; }
.opt-pc.is-full:not([aria-pressed="true"]) { opacity: .45; }

/* Desktop: the picker box takes the mat's height (it adds none of its own to the row) and its cards scroll inside */
@media (min-width: 1100px) {
	.opt-build { align-items: stretch; }
	.opt-pick { contain: size; min-height: 420px; }
	.opt-panel { max-height: none; }
}
/* Below 1100: one column, the mat, then the picker box (the phone pass is the next iteration, 30 Oct 16:56) */
@media (max-width: 1099px) {
	.opt-build { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 781px) {
	.opt-team__lead { max-width: none; }
	.opt-mat { margin-inline: -16px; padding: 16px; border-radius: 0; border-inline: 0; }
	.opt-row--front { gap: 8px; margin-bottom: 12px; }
	.opt-row--back { gap: 8px; }
	.opt-mat .opt-row__lab { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
	.opt-seat__empty { font-size: 11px; letter-spacing: .06em; }
	.opt-seat__x { width: 22px; height: 22px; font-size: 14px; top: 4px; right: 4px; }
	.opt-shared { font-size: 26px; }
	.opt-actions .opt-btn { flex: 1 1 auto; }
	.opt-pick { margin-inline: -16px; border-radius: 0; border-inline: 0; overflow: visible; }
	.opt-panel { padding: 12px 16px 16px; }
	.opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
	.opt-pc__name { font-size: 14px; }
	/* A thin team strip that stays under the bars while picking: four dots, the total, a link back up */
	.opt-strip { position: sticky; top: calc(var(--op-head-h, 0px) + var(--opl-h, 50px)); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
		background: var(--wp--preset--color--deep); border-bottom: 1px solid var(--wp--custom--line--divider); box-shadow: 0 6px 12px rgba(0, 0, 0, .4); }
	.opt-strip .oph-labs { margin: 0; font-size: 13px; }
	.opt-strip__dots { display: flex; gap: 4px; }
	.opt-strip__dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--wp--preset--color--dim); }
	.opt-strip__dots i.is-on { border-color: var(--wp--preset--color--yellow); background: var(--wp--preset--color--yellow); }
	.opt-strip__t { font: 700 16px/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--text); }
	.opt-strip__t.is-over { color: var(--wp--preset--color--error); }
	.opt-strip__of { font-size: 13px; color: var(--wp--preset--color--muted); }
	.opt-strip__up { margin-left: auto; font: 600 13px/1 var(--wp--preset--font-family--label); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--yellow); text-decoration: none; }
	.opt-tabs { padding: 0 6px; }
	.opt-tab { padding: 6px 10px 8px; }
	.opt-tab__n { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.opt-seat.is-drop img { animation: none; }
	.opt-cog b, .opt-pc__img { transition: none; }
}

/* ==================== Page versions: a block's look inside one page's own layout (moved from the page stylesheets, 25 Oct) ==================== */
/* Start here (learn.php): Why OverPower mini and Pick where to start swipe on a phone (24 Oct). The team panel and its game mat left Start here on 30 Oct (global-builder took their place). */
@media (max-width: 781px) {
	/* 30 Oct (Mr Manager, phone screenshots): the pictures were miniaturised in the one-tile swipe. Each picture zone is taller and the
	   pictures fill it: the Power icons 72 px and floating higher, "Multiple formats" at the desktop size, the Invincible card 240 px wide,
	   the packs bigger. The packs may spill over the tile's top edge (his word); learn.css gives the swipe track the room above. */
	.opl--start .opb-whymini__packs, .opl--start .opb-whymini__icons, .opl--start .opb-whymini__word, .opl--start .opb-whymini__card { height: 210px; }
	.opl--start .opb-whymini__tile { padding: 20px 16px; overflow: visible; }
	.opl--start .opb-whymini__pk { width: 35%; }
	.opl--start .opb-whymini__icons { grid-template-columns: repeat(2, 72px); gap: 16px; }
	.opl--start .opb-whymini__icons img { width: 72px; height: 72px; }
	.opl--start .opb-whymini__word { font-size: 108px; } /* 31 Oct (Mr Manager): bigger again; fills the tile width */
	.opl--start .opb-whymini__card .op-foil { width: 240px; }
	.opl--start .opb-whymini { --fl: 10px; }
}

/* The Creators page (creators.php): its sizes of the Creators block's kit picture and video tiles (22 Oct). */
.opcr-kit .opb-creators__copy .oph-h2 { margin-bottom: 40px; }
.opcr-vid__frame .opb-vid__play { position: relative; z-index: 1; }
.opcr-vid__text .opb-vid__name { font-size: var(--wp--preset--font-size--body); line-height: 1.35; color: var(--wp--preset--color--text); }
@media (max-width: 781px) {
	.opcr-kit .opb-creators__copy .oph-h2 { margin-bottom: 24px; }
	.opcr-vid .opb-vid__play { width: 40px; height: 40px; }
	.opcr-vid .opb-vid__play svg { width: 18px; height: 18px; }
	.opcr-vid__text .opb-vid__name { font-size: var(--wp--preset--font-size--small); }
}


/* ---------- Open a booster pack (global-packs, 30 Oct; moved from guides.css, the Rarity Guide's opener since 26 Oct). One block, two
   versions: the Rarity Guide's (with the three panels) and Home's (.opb-packs--home: smaller, no panels). Behaviour: global.js. ---------- */
.opb-pko__panels { list-style: none; margin: 0; padding: 0; }
.opb-packs__lead { margin: 0; max-width: 344px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.opb-pko { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; align-items: start; }
.opb-pko__side { text-align: center; }
.opb-pko__btn { position: relative; display: block; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; color: inherit; }
.opb-pko__btn:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 6px; border-radius: 8px; }
.opb-pko__fan { position: relative; display: block; width: 58%; margin: 34px auto 0; aspect-ratio: 360 / 638; padding-bottom: 14%; }
.opb-pko__pack { position: absolute; inset: 0; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); transition: transform .3s ease, opacity .3s ease; transform-origin: 50% 92%; }
.opb-pko__pack--l { transform: rotate(-18deg) translate(-40%, 3%); z-index: 2; }
.opb-pko__pack--r { transform: rotate(18deg) translate(40%, 3%); z-index: 2; }
.opb-pko__pack--c { transform: translateY(-6%); z-index: 3; }
.opb-pko__pack--new { transform: rotate(18deg) translate(40%, 3%) scale(.6); opacity: 0; z-index: 1; }
.opb-pko__pack--c.is-torn { clip-path: inset(13% 0 0 0); transition: transform .5s ease, opacity .5s ease; }
.opb-pko__pack--c.is-gone { transform: translateY(30%) rotate(8deg); opacity: 0; }
.opb-pko__strip { position: absolute; inset: 0; width: 100%; height: auto; clip-path: inset(0 0 87% 0); transform-origin: 50% 92%; transform: translateY(-6%); animation: opb-pko-tear .55s ease-out forwards; pointer-events: none; z-index: 4; }
@keyframes opb-pko-tear { 0% { transform: translateY(-6%); } 100% { transform: translate(30%, -70%) rotate(28deg); opacity: 0; } }
.opb-pko__cta { display: inline-block; margin-top: 22px; }
.opb-pko__libline { margin: 16px 0 0; }
.opb-pko__lib { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--cyan); text-decoration: none; border-bottom: 1px solid rgba(92, 225, 230, .45); padding-bottom: 2px; }
.opb-pko__lib:hover, .opb-pko__lib:focus-visible { color: var(--wp--preset--color--text); border-color: currentColor; }
.opb-pko__peekcap { margin: 12px 0 0; }
.opb-pko__wells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.opb-pko__well { padding: 14px 14px 12px; border: 1px solid var(--wp--custom--line--divider); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.opb-pko__well--rare { border-color: rgba(240, 228, 55, .45); }
.opb-pko__wlab { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.opb-pko__wlab span { color: var(--wp--preset--color--dim); letter-spacing: .08em; }
.opb-pko__dealt { display: grid; gap: 8px; }
.opb-pko__well--stack .opb-pko__dealt { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opb-pko__card--char { grid-column: 1 / -1; width: 62%; justify-self: center; margin-bottom: 4px; }
.opb-pko__well--unc .opb-pko__dealt { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; } /* a landscape uncommon sits centred in its portrait row */
.opb-pko__well--rare .opb-pko__dealt { grid-template-columns: minmax(0, 220px); }
/* One dealt card: an empty, dashed slot until the deal; then the picture (or the picture under the foil) comes in from above */
.opb-pko__card { position: relative; display: block; border-radius: 6px; background: rgba(10, 20, 60, .6); border: 1px dashed rgba(147, 166, 206, .35); overflow: hidden; }
.opb-pko__card--land { aspect-ratio: 620 / 444; }
.opb-pko__card--port { aspect-ratio: 444 / 620; }
.opb-pko__card > img, .opb-pko__card > .op-foil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(-26px) scale(.9) rotate(-4deg); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.opb-pko__card > img, .opb-pko__card .op-foil img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.opb-pko__card.is-in { border-style: solid; border-color: transparent; cursor: zoom-in; }
.opb-pko__card.is-in > img, .opb-pko__card.is-in > .op-foil { opacity: 1; transform: none; }
.opb-pko__outcome { margin: 10px 0 0; min-height: 1.4em; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: .06em; color: var(--wp--preset--color--yellow); }
/* The peek: the card, large, floating beside the one under the pointer (guides.js places it) */
.opb-pko__peek { position: fixed; z-index: 9000; pointer-events: none; opacity: 0; transition: opacity .15s ease; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .7)); }
.opb-pko__peek.is-on { opacity: 1; }
.opb-pko__peek img { display: block; width: 100%; height: 100%; border-radius: 10px; }
.opb-pko__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.opb-pko__panel { padding: 26px 26px 22px; }
.opb-pko__panels h3.opb-pko__ptitle { margin: 0 0 4px; font-size: 44px; line-height: 1; letter-spacing: .02em; }
.opb-pko__psub { margin: 0 0 14px; font-size: 14px; letter-spacing: .14em; color: var(--wp--preset--color--cyan); }
.opb-pko__pline { margin: 0; font-size: 17px; line-height: 1.5; }
.opb-pko__ul { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--text); }
@media (prefers-reduced-motion: reduce) {
	.opb-pko__pack, .opb-pko__card > img, .opb-pko__card > .op-foil, .opb-pko__peek { transition: none; }
	.opb-pko__strip { display: none; }
}

/* Home's version: the same opener, smaller (Mr Manager, 30 Oct: "it just has to be a little bit smaller for the homepage") */
.opb-packs--home .opb-pko { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
.opb-packs--home .opb-pko__fan { width: 54%; margin-top: 24px; }
.opb-packs--home .opb-pko__wells { gap: 12px 16px; }
.opb-packs--home .opb-pko__well { padding: 10px 10px 8px; }
.opb-packs--home .opb-pko__well--stack .opb-pko__dealt { gap: 6px; }
.opb-packs--home .opb-pko__card--char { width: 48%; }
.opb-packs--home .opb-pko__well--rare .opb-pko__dealt { grid-template-columns: minmax(0, 170px); }
.opb-packs--home .opb-pko__libline + .opb-pko__libline { margin-top: 8px; }
.opb-packs--home .opb-pko__lib { font-size: 13px; letter-spacing: .06em; }
@media (max-width: 1099px) {
	.opb-pko { grid-template-columns: minmax(0, 1fr); }
	.opb-pko__side { max-width: 300px; margin: 0 auto; }
	.opb-pko__panels { grid-template-columns: minmax(0, 1fr); }
	.opb-packs--home .opb-pko { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 781px) {
	.opb-packs__lead { max-width: none; }
	.opb-pko { gap: 24px; overflow-x: clip; } /* the fanned packs reach past the gutter on narrow screens; nothing scrolls sideways */
	.opb-pko__fan { width: 56%; margin-top: 24px; }
	.opb-pko__wells { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.opb-pko__well--rare .opb-pko__dealt { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
	.opb-pko__panels { gap: 16px; margin-top: 24px; }
	.opb-pko__panel { padding: 20px 18px 18px; }
	.opb-pko__panels h3.opb-pko__ptitle { font-size: 36px; }
	.opb-packs--home .opb-pko__wells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.opb-packs--home .opb-pko__well--stack .opb-pko__dealt { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
	.opb-packs--home .opb-pko__well { padding: 8px 6px 6px; }
	.opb-packs--home .opb-pko__wlab { font-size: 11px; letter-spacing: .06em; }
	.opb-packs--home .opb-pko__card--char { width: 70%; }
	.opb-packs--home .opb-pko__fan { width: 36%; margin-top: 16px; } /* smaller on a phone, so the deal is on screen after the tap */
	.opb-packs--home .opb-pko__cta { margin-top: 14px; }
	.opb-packs--home .opb-pko__peekcap { margin-top: 6px; }
}