/* Ekholux interactive FX layer — signal / echo theme */
:root{
	--ekfx-accent: #7dc1cd;
	--ekfx-hot: #ff2d3c;
	--ekfx-mono: 'Share Tech Mono', ui-monospace, Consolas, monospace;
	--ekfx-hud: 'Oxanium', 'Share Tech Mono', sans-serif;
}

/* ---------- signal progress bar ---------- */
.ekfx-progress{
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, rgba(125,193,205,0), var(--ekfx-accent) 60%, #fff);
	box-shadow: 0 0 10px var(--ekfx-accent);
	z-index: 10001;
	pointer-events: none;
}

/* ---------- hero: scanlines, noise, HUD ---------- */
.kv .ekfx-screen{
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%),
		repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.kv .ekfx-noise{
	inset: 0;
	pointer-events: none;
	opacity: .06;
	mix-blend-mode: overlay;
	background-repeat: repeat;
	background-size: 200px 200px;
}
.kv .ekfx-hud{
	inset: 0;
	pointer-events: none;
	font-family: var(--ekfx-mono);
	color: rgba(255,255,255,.75);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ekfx-hud .c{
	position: absolute;
	width: 28px;
	height: 28px;
	border: 0 solid rgba(255,255,255,.6);
}
.ekfx-hud .c1{ top: 100px; left: 40px; border-top-width: 2px; border-left-width: 2px; }
.ekfx-hud .c2{ top: 100px; right: 40px; border-top-width: 2px; border-right-width: 2px; }
.ekfx-hud .c3{ bottom: 40px; left: 40px; border-bottom-width: 2px; border-left-width: 2px; }
.ekfx-hud .c4{ bottom: 40px; right: 40px; border-bottom-width: 2px; border-right-width: 2px; }
.ekfx-hud .scroll{
	position: absolute;
	bottom: 34px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 11px;
	letter-spacing: .4em;
	opacity: .8;
}
.ekfx-hud .scroll::after{
	content: "";
	display: block;
	width: 1px;
	height: 46px;
	margin: 10px auto 0;
	background: linear-gradient(#fff, rgba(255,255,255,0));
	transform-origin: top;
	animation: ekfx-drop 1.8s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes ekfx-drop{
	0%  { transform: scaleY(0); opacity: 1; }
	60% { transform: scaleY(1); opacity: 1; }
	100%{ transform: scaleY(1); opacity: 0; }
}

/* hero parallax uses the independent `translate` property so existing transforms/animations keep working */
.kv .kvvideo{
	inset: -30px;
	width: auto;
	height: auto;
	transition: translate .6s cubic-bezier(.2,.7,.3,1);
}
.kv .kv_t{
	transition: translate .4s cubic-bezier(.2,.7,.3,1);
}

/* logo glitch burst */
.kv .kv_t.ekfx-on{
	animation: none;
	opacity: 1;
}
.kv .kv_t.ekfx-on.ekfx-glitch{
	animation: ekfx-glitch .45s steps(1) 1;
}
@keyframes ekfx-glitch{
	0%  { filter: drop-shadow(-6px 0 0 rgba(255,45,60,.8)) drop-shadow(6px 0 0 rgba(125,193,205,.8)); clip-path: inset(10% 0 55% 0); transform: translateX(-8px); }
	20% { filter: drop-shadow(5px 0 0 rgba(255,45,60,.8)) drop-shadow(-5px 0 0 rgba(125,193,205,.8)); clip-path: inset(60% 0 8% 0); transform: translateX(10px); }
	40% { filter: drop-shadow(-3px 0 0 rgba(255,45,60,.8)) drop-shadow(3px 0 0 rgba(125,193,205,.8)); clip-path: inset(30% 0 30% 0); transform: translateX(-4px); }
	60% { filter: none; clip-path: none; transform: none; }
	80% { filter: drop-shadow(2px 0 0 rgba(255,45,60,.7)) drop-shadow(-2px 0 0 rgba(125,193,205,.7)); clip-path: none; transform: translateX(2px); }
	100%{ filter: none; clip-path: none; transform: none; }
}

/* magnetic store buttons + light sweep */
.kv_but > a{
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	transition: 0.3s, translate .25s cubic-bezier(.2,.7,.3,1);
}
.kv_but > a::after{
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
	transform: skewX(-20deg);
	pointer-events: none;
}
.kv_but > a:hover::after{
	animation: ekfx-sweep .7s ease-out;
}
@keyframes ekfx-sweep{
	to{ left: 130%; }
}

/* ---------- headings decode ---------- */
h2.ekfx-decoding{
	font-family: var(--ekfx-mono), inherit;
}

/* ---------- video frames (HUD brackets) ---------- */
.p1video,.p2video,.p3video{
	position: relative;
}
.p1video::before,.p1video::after,
.p2video::before,.p2video::after,
.p3video::before,.p3video::after{
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border: 0 solid #fff;
	pointer-events: none;
	mix-blend-mode: difference;
	transition: all .35s cubic-bezier(.2,.7,.3,1);
	z-index: 2;
}
.p1video::before,.p2video::before,.p3video::before{
	top: -12px;
	left: -12px;
	border-top-width: 2px;
	border-left-width: 2px;
}
.p1video::after,.p2video::after,.p3video::after{
	bottom: -12px;
	right: -12px;
	border-bottom-width: 2px;
	border-right-width: 2px;
}
.p2video::after{
	right: calc(6% - 12px);
}
.p1video:hover::before,.p2video:hover::before,.p3video:hover::before{
	top: -20px;
	left: -20px;
	width: 70px;
	height: 70px;
}
.p1video:hover::after,.p2video:hover::after,.p3video:hover::after{
	bottom: -20px;
	right: -20px;
	width: 70px;
	height: 70px;
}
.p2video:hover::after{
	right: calc(6% - 20px);
}

/* ---------- screenshot cards: 3D tilt, glare, scan ---------- */
.picall{
	perspective: 900px;
}
.picall > div{
	position: relative;
	overflow: hidden;
	transform-style: preserve-3d;
	transition: filter .3s, transform .2s ease-out, box-shadow .3s;
	box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.picall > div:hover{
	box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 20px 40px rgba(0,0,0,.6);
}
.picall > div::before{
	content: attr(data-ekfx-label);
	position: absolute;
	left: 10px;
	bottom: 8px;
	font-family: var(--ekfx-mono);
	font-size: 12px;
	letter-spacing: .15em;
	color: #fff;
	text-shadow: 0 0 6px #000;
	opacity: .7;
	z-index: 2;
}
.picall > div::after{
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
		linear-gradient(rgba(125,193,205,0) 0%, rgba(125,193,205,.35) 50%, rgba(125,193,205,0) 52%);
	background-size: 100% 100%, 100% 300%;
	background-position: 0 0, 0 100%;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.picall > div:hover::after{
	opacity: 1;
	animation: ekfx-scan 1.2s linear infinite;
}
@keyframes ekfx-scan{
	from{ background-position: 0 0, 0 100%; }
	to  { background-position: 0 0, 0 0; }
}

/* ---------- diagonal section parallax ---------- */
.p2 .p2bg{
	transition: translate .3s linear;
}

/* ---------- reduced motion / touch ---------- */
@media (prefers-reduced-motion: reduce){
	.kv .ekfx-noise,.ekfx-hud .scroll::after{ animation: none; }
	.kv .ekfx-noise{ display: none; }
}
/* desktop single-block puzzle layout: iframe fills .p2video, so bracket sits at the real edge */
@media screen and (min-width:1521px){
	.p2video::after{ right: -12px; }
	.p2video:hover::after{ right: -20px; }
}
@media screen and (max-width:1000px){
	.p1video::before,.p2video::before,.p3video::before{ top: -6px; left: -6px; width: 20px; height: 20px; }
	.p1video::after,.p2video::after,.p3video::after{ bottom: -6px; right: -6px; width: 20px; height: 20px; }
	.p2video::after{ right: calc(6% - 6px); }
	.picall > div::before{ display: none; }
	.ekfx-hud .scroll{ display: none; }
	.ekfx-hud .c1,.ekfx-hud .c2{ top: 80px; }
	.ekfx-hud .c1,.ekfx-hud .c3{ left: 16px; }
	.ekfx-hud .c2,.ekfx-hud .c4{ right: 16px; }
	.kv .ekfx-hud{ font-size: 11px; }
}

/* ---------- awards: focus, lock-on HUD, spotlight, counter ---------- */
.p4 .ekfx-count{
	font-family: var(--ekfx-mono);
	font-size: 14px;
	letter-spacing: .3em;
	color: rgba(255,255,255,.6);
	margin: -10px auto 10px;
}
.p4 .ekfx-count b{
	color: #fff;
	font-weight: normal;
	font-size: 22px;
	margin-right: 6px;
}
.award.ekfx-awards{
	position: relative;
}
.p4.ekfx-spot{
	position: relative;
}
.p4.ekfx-spot::before{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(125,193,205,.13), rgba(125,193,205,0) 70%);
	opacity: 0;
	transition: opacity .4s;
}
.p4.ekfx-spot.is-focus::before{
	opacity: 1;
}
.award.ekfx-awards > img{
	position: relative;
	transition: filter .35s, scale .35s cubic-bezier(.2,.7,.3,1);
}
.award.ekfx-awards.is-focus > img{
	filter: brightness(.35) grayscale(1);
}
.award.ekfx-awards.is-focus > img.is-active{
	filter: drop-shadow(0 0 14px rgba(125,193,205,.55)) brightness(1.15);
	scale: 1.1;
	z-index: 1;
}
.ekfx-lock{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	transition: left .35s cubic-bezier(.2,.7,.3,1), top .35s cubic-bezier(.2,.7,.3,1), width .35s cubic-bezier(.2,.7,.3,1), height .35s cubic-bezier(.2,.7,.3,1), opacity .25s;
}
.ekfx-lock.is-on{
	opacity: 1;
}
.ekfx-lock i{
	position: absolute;
	width: 18px;
	height: 18px;
	border: 0 solid var(--ekfx-accent);
}
.ekfx-lock i:nth-child(1){ top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.ekfx-lock i:nth-child(2){ top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.ekfx-lock i:nth-child(3){ bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.ekfx-lock i:nth-child(4){ bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.ekfx-lock.is-flash i{
	animation: ekfx-lockflash .5s ease-out;
}
@keyframes ekfx-lockflash{
	0%  { border-color: #fff; transform: scale(1.6); }
	100%{ border-color: var(--ekfx-accent); transform: scale(1); }
}
.ekfx-lock .cap{
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--ekfx-mono);
	font-size: 12px;
	letter-spacing: .12em;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	background: rgba(0,0,0,.75);
	border: 1px solid rgba(125,193,205,.5);
	padding: 6px 12px;
}
.ekfx-lock .cap em{
	display: block;
	font-style: normal;
	color: var(--ekfx-accent);
	font-size: 11px;
}
@media screen and (max-width:700px){
	.ekfx-lock .cap{
		white-space: normal;
		width: 220px;
	}
}
@media (prefers-reduced-motion: reduce){
	.ekfx-lock{ transition: opacity .25s; }
}


/* ======================================================================
   In-game HUD (PlayerHUD_v3 / HUDBase.cs) — values taken from the Unity project
   track #808080, V #FFA600→#FF0700, ACC #DD9309, HP #FF0000, damage trail #A86F5E,
   rest opacity 0.8, black frame at 0.8
   ====================================================================== */
.ekfx-hud .g-bar{
	position: relative;
	height: 4px;
	padding: 3px;
	background: rgba(0,0,0,.8);
}
.ekfx-hud .g-bar::before{
	content: "";
	position: absolute;
	inset: 3px;
	background: repeating-linear-gradient(90deg, #808080 0 30px, rgba(128,128,128,0) 30px 37px);
}
.ekfx-hud .g-bar > i{
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	max-width: calc(100% - 6px);
	width: 0;
}
.ekfx-hud .lab{
	font-family: var(--ekfx-hud);
	font-weight: 700;
	color: #fff;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* V / ACC — top left */
.ekfx-hud .g-bars{
	position: absolute;
	top: 118px;
	left: 82px;
}
.ekfx-hud .g-row{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	opacity: .8;
	transition: opacity .25s;
}
.ekfx-hud .g-row .lab{
	width: 46px;
	text-align: right;
	font-size: 20px;
	line-height: 1;
}
.ekfx-hud .g-row .g-bar{
	width: 300px;
}
.ekfx-hud .g-v .fill{
	background: linear-gradient(90deg, #FFA600, #FF0700);
}
.ekfx-hud .g-v .num{
	font-family: var(--ekfx-mono);
	font-size: 12px;
	color: rgba(255,255,255,.75);
	min-width: 90px;
}
.ekfx-hud .g-acc{
	opacity: .25;
}
.ekfx-hud .g-acc.is-on{
	opacity: 1;
}
.ekfx-hud .g-acc .fill{
	background: #DD9309;
}

/* HP — bottom left */
.ekfx-hud .g-hp{
	position: absolute;
	left: 82px;
	bottom: 66px;
	width: 360px;
	opacity: .8;
}
.ekfx-hud .g-hp-head{
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px 36px;
}
.ekfx-hud .g-hp .hex{
	width: 22px;
	height: 25px;
	background: #9a9a9a;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ekfx-hud .g-hp .lab{
	font-size: 30px;
	line-height: 1;
}
.ekfx-hud .g-hp .g-bar{
	height: 6px;
	transform-origin: left center;
}
.ekfx-hud .g-hp .fill{
	background: #FF0000;
}
/* radar — bottom right, tilted soft ring like the in-game disc */
.ekfx-hud .g-radar{
	position: absolute;
	right: 92px;
	bottom: 40px;
	width: 190px;
	height: 190px;
	perspective: 520px;
}
.ekfx-hud .g-radar .disc{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: rotateX(58deg);
	transform-style: preserve-3d;
	background: radial-gradient(circle,
		rgba(232,214,170,0) 0 40%,
		rgba(232,214,170,.10) 56%,
		rgba(236,220,178,.55) 67%,
		rgba(244,230,192,.9) 70%,
		rgba(232,214,170,.25) 72%,
		rgba(232,214,170,0) 75%);
	filter: drop-shadow(0 0 10px rgba(232,214,170,.35));
}
.ekfx-hud .g-radar .arrow{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 28px;
	background: rgba(40,210,70,.9);
	clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
}
.ekfx-hud .g-radar .line{
	position: absolute;
	left: 50%;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	transform-origin: 0 50%;
	background: linear-gradient(90deg, rgba(210,215,60,.8), rgba(210,215,60,0));
}
.ekfx-hud .g-radar .target{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}
.ekfx-hud .g-radar .target::before{
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #d4dc3c;
	box-shadow: 0 0 12px rgba(212,220,60,.9);
	transition: opacity .2s;
}
.ekfx-hud .g-radar .target.is-far::before{
	opacity: .35;
}
.ekfx-hud .g-radar .cyl{
	position: absolute;
	left: -2px;
	bottom: 0;
	width: 4px;
	height: 46px;
	transform-origin: 50% 100%;
	transform: rotateX(-90deg);
	background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,.6));
}
.ekfx-hud .g-radar .cyl.down{
	background: linear-gradient(rgba(0,255,90,0), rgba(0,255,90,.6));
}
.ekfx-hud .g-radar .edge{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 12px;
	background: #d4dc3c;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	opacity: 0;
	transition: opacity .2s;
}

/* "you are here" location chip (level names from LevelNames_EN.json) */
.ekfx-loc{
	position: fixed;
	left: 40px;
	bottom: 36px;
	z-index: 9000;
	pointer-events: none;
	font-family: var(--ekfx-mono);
	color: #E8E6E3;
	background: rgba(33,35,40,.82);
	border-left: 3px solid #B8BCC2;
	padding: 8px 14px 9px;
	opacity: 0;
	translate: -12px 0;
	transition: opacity .3s, translate .3s;
}
.ekfx-loc.is-on{
	opacity: 1;
	translate: 0 0;
}
.ekfx-loc em{
	display: block;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .3em;
	color: #7C8085;
}
.ekfx-loc span{
	font-family: var(--ekfx-hud);
	font-size: 15px;
	letter-spacing: .06em;
}

/* in-game menu palette for the nav (EkholuxMenuPalette.cs): flat light bar, dark text */
@media screen and (min-width:1001px){
	.nav > div:not(.lang){
		margin: 0 4px;
		padding: 6px 14px;
		border-bottom: none !important;
		transition: background .15s, color .15s;
	}
	.nav > div:not(.lang):hover{
		background: #CED2D7;
		color: #212328;
	}
	.nav > div.on:not(.lang){
		background: #B8BCC2;
		color: #212328;
	}
	.nav > div.lang{
		margin-left: 18px;
	}
	.nav > div.lang ul.langlist li:hover,
	.nav > div.lang ul.langlist li.on{
		background: #CED2D7;
		color: #212328;
	}
}

/* award caption as an in-game scan label: leader line, then typed title and body */
.ekfx-lock .lead{
	position: absolute;
	left: 100%;
	top: 100%;
	width: 90px;
	height: 30px;
	overflow: visible;
}
.ekfx-lock .lead polyline{
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-dasharray: 130;
	stroke-dashoffset: 130;
}
.ekfx-lock.is-draw .lead polyline{
	animation: ekfx-draw .35s linear forwards;
}
@keyframes ekfx-draw{
	to{ stroke-dashoffset: 0; }
}
.ekfx-lock .cap{
	top: calc(100% + 12px);
	left: calc(100% + 96px);
	transform: none;
	text-align: left;
	min-width: 220px;
	transform-origin: 0 50%;
}
.ekfx-lock.is-flip .lead{
	left: auto;
	right: 100%;
	transform: scaleX(-1);
}
.ekfx-lock.is-flip .cap{
	left: auto;
	right: calc(100% + 96px);
	text-align: right;
	transform-origin: 100% 50%;
}
.ekfx-lock.is-draw .cap{
	animation: ekfx-scan-in .5s cubic-bezier(.34,1.56,.64,1);
}
.ekfx-lock .cap .t{
	display: block;
	font-family: var(--ekfx-hud);
	font-size: 14px;
	letter-spacing: .04em;
	min-height: 1.4em;
}
.ekfx-lock .cap .d{
	display: block;
	min-height: 1.4em;
}
@keyframes ekfx-scan-in{
	from{ scale: .15; opacity: 0; }
	to  { scale: 1; opacity: 1; }
}

@media screen and (max-width:1000px){
	.ekfx-hud .g-bars,.ekfx-hud .g-radar{ display: none; }
	.ekfx-hud .g-hp{ top: 92px; bottom: auto; left: 52px; width: 170px; }
	.ekfx-hud .g-hp-head{ margin: 0 0 6px 0; gap: 8px; }
	.ekfx-hud .g-hp .hex{ width: 14px; height: 16px; }
	.ekfx-hud .g-hp .lab{ font-size: 18px; }
	.ekfx-hud .g-hp .g-bar{ height: 4px; padding: 2px; }
	.ekfx-loc{ display: none; }
	.ekfx-lock .lead{ display: none; }
	.ekfx-lock .cap,.ekfx-lock.is-flip .cap{
		left: 50%;
		right: auto;
		top: calc(100% + 10px);
		translate: -50% 0;
		text-align: center;
		transform-origin: 50% 0;
	}
}

/* ======================================================================
   Frameless pass — match the in-game HUD: elements float on the image,
   no viewfinder corners, outlines or boxed captions
   ====================================================================== */
.ekfx-hud .c,
.ekfx-lock i{
	display: none;
}
.p1video::before,.p1video::after,
.p2video::before,.p2video::after,
.p3video::before,.p3video::after{
	content: none;
}
.picall > div,
.picall > div:hover{
	box-shadow: none;
}
.ekfx-hud .g-bars{
	top: 100px;
	left: 48px;
}
.ekfx-hud .g-hp{
	left: 48px;
	bottom: 48px;
}
.ekfx-hud .g-radar{
	right: 70px;
	bottom: 28px;
}
.ekfx-hud .lab,
.ekfx-hud .g-v .num{
	text-shadow: 0 0 6px rgba(0,0,0,.6);
}
.ekfx-loc{
	background: none;
	border-left: none;
	padding: 0;
	text-shadow: 0 0 6px rgba(0,0,0,.9);
}
.ekfx-loc em{
	color: rgba(232,230,227,.6);
}
.ekfx-lock .cap{
	background: none;
	border: none;
	padding: 0;
	text-shadow: 0 0 6px #000, 0 0 2px #000;
}
.ekfx-lock .cap em{
	color: rgba(255,255,255,.6);
}
.ekfx-lock .lead{
	left: calc(100% - 14px);
	top: calc(100% - 14px);
}
.ekfx-lock .cap{
	top: calc(100% - 2px);
	left: calc(100% + 82px);
}
.ekfx-lock.is-flip .lead{
	left: auto;
	right: calc(100% - 14px);
}
.ekfx-lock.is-flip .cap{
	left: auto;
	right: calc(100% + 82px);
}
@media screen and (max-width:1000px){
	.ekfx-hud .g-hp{ top: 84px; bottom: auto; left: 20px; }
	.ekfx-lock .cap,.ekfx-lock.is-flip .cap{
		left: 50%;
		right: auto;
		top: calc(100% + 4px);
	}
}


/* ======================================================================
   Sound-ball impact (bounceVfx_soundball)
   ====================================================================== */
.ekfx-impact{
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 10001;
	mix-blend-mode: plus-lighter;
}
@supports not (mix-blend-mode: plus-lighter){
	.ekfx-impact{ mix-blend-mode: screen; }
}

/* store buttons: keep a gap on desktop so the magnetic hover never overlaps them */
@media screen and (min-width:1001px){
	.kv_but > a{
		margin: 7px;
	}
}