/* UNDEADARENA — the site (21. 10. 2026), from the web kit (KIT/theme.css, reference 01.png) */
:root{
	--bg:#090c10; --surface:#12171d; --surface2:#0e1217; --border:#36404c;
	--text:#f5f2e7; --muted:#b7bec8; --accent:#ffe000; --accent-hover:#fff06b;
	--heading:"Barlow Condensed",Impact,sans-serif; --body:Inter,Arial,sans-serif;
	--gutter:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
/* the page in a frame, narrower, as in the kit's 01.png (owner, 21. 10.) */
.page{position:relative;overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--accent);color:#090c10;padding:8px 12px}
svg.i{width:1.4em;height:1.4em;flex:none}

/* cut corners WITH their line on the cut (owner, 21. 10.): the diagonal is a gradient in each cut corner,
   the straight edges an inset line; --c the cut, --ln the line's colour */
.cut{--c:14px;--ln:var(--border);
	clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
	background:
		linear-gradient(135deg,transparent calc(50% - 1px),var(--ln-tl,var(--ln)) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) top left/var(--c) var(--c) no-repeat,
		linear-gradient(135deg,transparent calc(50% - 1px),var(--ln) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) bottom right/var(--c) var(--c) no-repeat,
		var(--fill,transparent);
	box-shadow:inset 0 0 0 1px var(--ln)}
.btn{display:inline-flex;align-items:center;gap:.6em;font:800 1.15rem/1 var(--heading);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:1rem 1.5rem;border:0;cursor:pointer;color:var(--text)}
.btn-primary{--fill:var(--accent);--ln:#c9b000;color:#090c10}.btn-primary:hover{--fill:var(--accent-hover)}
.btn-ghost{--fill:rgba(9,12,16,.6);--ln:#5a6573}.btn-ghost:hover{--ln:var(--accent);color:var(--accent)}
.tag{display:inline-block;font:600 .8rem/1 var(--heading);letter-spacing:.18em;text-transform:uppercase;color:#090c10;background:var(--accent);padding:.35rem .6rem}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gutter)}
.top .logo img{height:52px;width:auto}
.top nav{display:flex;align-items:center;gap:28px}
.top nav a{font:600 1.05rem/1 var(--heading);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--text)}
.top nav a:hover{color:var(--accent)}
.top .btn{padding:.7rem 1.1rem;font-size:1rem}
.menu-btn{display:none;background:none;border:0;color:var(--text);padding:6px;cursor:pointer}
@media(max-width:860px){
	.menu-btn{display:block}
	.top nav{display:none;position:absolute;top:84px;right:var(--gutter);flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--border);min-width:220px}
	.top nav.open{display:flex}
	.top nav a{padding:14px 18px;border-bottom:1px solid var(--border)}
	.top nav .btn{margin:12px}
	.top .logo img{height:40px}
}

/* hero */
.hero{position:relative;padding:0;min-height:clamp(380px,50vh,560px);display:flex;align-items:center;overflow:hidden;background:#05070a}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,12,16,.92) 0%,rgba(9,12,16,.6) 38%,rgba(9,12,16,0) 68%),linear-gradient(0deg,var(--bg) 0%,rgba(9,12,16,0) 22%)}
.hero-in{position:relative;z-index:2;padding:104px var(--gutter) 34px;max-width:960px}
.eyebrow{display:flex;align-items:center;gap:14px;font:600 .95rem/1.3 var(--heading);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.eyebrow:before{content:"";width:40px;height:3px;background:var(--accent);flex:none}
h1{font:800 clamp(2.8rem,5.2vw,4.6rem)/.9 var(--heading);text-transform:uppercase;margin:0;letter-spacing:.01em}
h1 .y{color:var(--accent);display:block}
.lead{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--text);margin:14px 0 20px;max-width:40em;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.soon{font:800 1rem/1 var(--heading);letter-spacing:.14em;color:var(--accent);text-transform:uppercase;border:1px dashed rgba(255,224,0,.6);padding:.9rem 1.1rem}
.feats{display:flex;flex-wrap:wrap;gap:10px 28px;margin:20px 0 0;padding:0;list-style:none}
.feats li{display:flex;align-items:center;gap:10px;font:600 .9rem/1.2 var(--heading);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.feats svg{color:var(--accent)}
.dots{position:absolute;z-index:3;right:var(--gutter);bottom:24px;display:flex;gap:10px;align-items:center}
.dots button{width:34px;height:4px;border:0;padding:0;background:rgba(245,242,231,.35);cursor:pointer}
.dots button[aria-current="true"]{background:var(--accent)}
.dots .pause{width:auto;height:auto;background:none;color:var(--muted);font:600 .8rem/1 var(--heading);letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
.note{position:absolute;z-index:3;right:var(--gutter);bottom:6px;font-size:.72rem;color:rgba(183,190,200,.6)}
@media(max-width:640px){
	.hero{align-items:flex-end;min-height:92vh}
	.hero:before{background:linear-gradient(0deg,rgba(9,12,16,.97) 0%,rgba(9,12,16,.85) 45%,rgba(9,12,16,.2) 80%)}
	.hero-in{padding:110px var(--gutter) 70px}
	.slide img{object-position:72% center}
	.dots{left:var(--gutter);right:auto;bottom:22px}
	.note{display:none}
}

/* THE TECH PANEL (owner, 21. 10.: as Astra's "02 HAZARD PROTOCOL" bar): a dark steel bar, thin bevel lines,
   a raised plate in the middle with the label, yellow hazard chips at the ends and by the plate */
.protocol{position:relative;display:flex;align-items:center;justify-content:center;height:40px;
	background:linear-gradient(180deg,#161c23 0%,#0d1116 55%,#0a0d11 100%);
	border-top:1px solid #2a323c;border-bottom:1px solid #05070a;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.protocol:before,.protocol:after{content:"";position:absolute;top:0;bottom:0;width:120px;
	background:repeating-linear-gradient(120deg,transparent 0 8px,var(--accent) 8px 18px,transparent 18px 30px) center/100% 12px no-repeat;opacity:.9;
	clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.protocol:before{left:0}
.protocol:after{right:0;transform:scaleX(-1)}
.protocol .pz{flex:1;height:100%;position:relative}
.protocol .pz:before{content:"";position:absolute;left:150px;right:30px;top:9px;height:1px;background:#2a333e} /* the bevel line */
.protocol .pz:after{content:"";position:absolute;left:150px;right:30px;bottom:9px;height:1px;background:#06080b}
.protocol .pz.r:before,.protocol .pz.r:after{left:30px;right:150px}
.protocol .pl{position:relative;height:100%;display:flex;align-items:center;padding:0 64px;
	font:600 .74rem/1 var(--heading);letter-spacing:.42em;color:#8a95a3;white-space:nowrap;
	background:#2b343f;clip-path:polygon(22px 100%,0 0,100% 0,calc(100% - 22px) 100%)}
.protocol .pl:before{content:"";position:absolute;inset:0 1px 1px;background:linear-gradient(180deg,#0c1015,#11161c);clip-path:polygon(22px 100%,0 0,100% 0,calc(100% - 22px) 100%);z-index:-1}
.protocol .pl{isolation:isolate}
.protocol .pl:after{content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(115deg,transparent 18px,var(--accent) 18px 26px,transparent 26px 32px,var(--accent) 32px 40px,transparent 40px) left center/48px 14px no-repeat,
		linear-gradient(115deg,transparent 8px,var(--accent) 8px 16px,transparent 16px 22px,var(--accent) 22px 30px,transparent 30px) right center/48px 14px no-repeat}
@media(max-width:560px){.protocol .pl{letter-spacing:.24em;font-size:.62rem;padding:0 52px}.protocol:before,.protocol:after{width:60px}.protocol .pz:before,.protocol .pz:after{display:none}}

/* the header: the menu hangs from the top as a sunk trapezoid plate over the banner (owner, 21. 10.) */
.top{align-items:flex-start;padding-top:0!important;padding-bottom:0!important}
.top .logo{margin-top:16px}
@media(min-width:861px){
	.top nav{position:relative;isolation:isolate;height:62px;padding:0 96px 4px;gap:30px;
		background:#2b343f;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,30px 100%);
		filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
	.top nav:before{content:"";position:absolute;inset:0 1px 1px;z-index:-1;
		background:linear-gradient(180deg,#0a0d11 0%,#11161c 70%,#161c23 100%);
		clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,30px 100%)}
	.top nav:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
		background:linear-gradient(115deg,transparent 20px,var(--accent) 20px 29px,transparent 29px 35px,var(--accent) 35px 44px,transparent 44px) 22px center/56px 16px no-repeat,
			linear-gradient(115deg,transparent 8px,var(--accent) 8px 17px,transparent 17px 23px,var(--accent) 23px 32px,transparent 32px) calc(100% - 22px) center/56px 16px no-repeat}
	.top nav a{color:#c3cbd5}
	.top nav .btn{padding:.6rem 1rem;font-size:.95rem}
}
footer.line{background:linear-gradient(180deg,#161c23 0%,#0a0d11 100%);border-top:1px solid #2a323c;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* hazard divider */
.hazard{height:14px;background:repeating-linear-gradient(135deg,#111318 0 16px,var(--accent) 16px 32px);opacity:.9}

/* sections */
section{padding:84px var(--gutter)}
.h2{display:flex;align-items:center;gap:16px;font:800 clamp(2.2rem,5vw,3.6rem)/1 var(--heading);text-transform:uppercase;margin:0 0 14px}
.h2:before{content:"";width:40px;height:4px;background:var(--accent);flex:none}
.sub{color:var(--muted);max-width:44em;margin:0 0 40px;font-size:1.05rem}

/* mission cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{--c:18px;--ln:var(--border);--ln-tl:var(--accent);--fill:var(--surface);position:relative;display:flex;flex-direction:column;padding:2px}
.card img{width:100%;aspect-ratio:21/10;object-fit:cover;object-position:center 70%;
	clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px)}
.card-b{position:relative;padding:11px 16px 12px;padding-right:58px;flex:1}
.card h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:800 1.35rem/1 var(--heading);letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px}
.card .tag{font-size:.66rem;padding:.28rem .45rem}
.card p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.4}
.card .go{position:absolute;right:14px;bottom:14px;width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:#090c10;
	clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.card .go svg{width:20px;height:20px}
.card:before{content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;background:var(--accent)} /* the kit's small yellow mark */

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{--c:16px;--fill:var(--surface2);padding:26px 24px;position:relative}
.step:before{counter-increment:s;content:"0" counter(s);font:800 3rem/1 var(--heading);color:var(--accent);display:block;margin-bottom:10px}
.step h3{font:800 1.4rem/1.1 var(--heading);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.step p{margin:0;color:var(--muted)}

/* the arena between missions */
.social{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:960px){.social{grid-template-columns:1fr}}
.social figure{margin:0;border:1px solid var(--border)}
.social figcaption{font-size:.75rem;color:rgba(183,190,200,.65);padding:8px 12px;background:var(--surface2)}
.social ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.social li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.social li svg{color:var(--accent);margin-top:2px}
.social li b{color:var(--text);font-weight:600}

/* notify */
.notify{background:linear-gradient(180deg,var(--surface2),var(--bg));border-top:1px solid var(--border)}
.notify-box{max-width:760px}
form.n{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
form.n input[type=email]{flex:1 1 280px;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--border);padding:1rem 1.1rem;font:400 1rem var(--body);
	clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
form.n input[type=email]:focus{border-color:var(--accent);outline:none}
.consent{display:flex;gap:10px;align-items:flex-start;flex-basis:100%;color:var(--muted);font-size:.9rem}
.consent input{margin-top:4px;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{flex-basis:100%;min-height:1.4em;font-weight:600}
.msg.ok{color:#8be38b}.msg.err{color:#ff8a8a}

/* footer */
footer{padding:48px var(--gutter) 36px;border-top:1px solid var(--border);display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:start;color:var(--muted);font-size:.9rem}
@media(max-width:860px){footer{grid-template-columns:1fr}}
footer img{height:56px;width:auto}
footer address{font-style:normal;line-height:1.7}
footer nav{display:grid;gap:8px}
footer nav a{text-decoration:none}footer nav a:hover{color:var(--accent)}
.copy{grid-column:1/-1;font-size:.8rem;color:rgba(183,190,200,.6)}

/* legal pages */
.legal{max-width:820px;margin:0 auto;padding:120px var(--gutter) 64px}
.legal h1{font-size:clamp(2.6rem,6vw,4rem);margin-bottom:6px}
.legal h2{font:800 1.5rem/1.2 var(--heading);text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:36px 0 8px}
.legal p,.legal li{color:var(--text)}
.legal .dim{color:var(--muted);font-size:.9rem}
.legal a{color:var(--accent)}

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

/* the missions right under the banner */
#misie{padding-top:12px;padding-bottom:56px}
#misie .h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:10px}
#misie .sub{display:none}

/* the footer: one quiet line (owner, 21. 10.: the details go to the contact page) */
footer.line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px var(--gutter);border-top:1px solid var(--border);font-size:.82rem;color:rgba(183,190,200,.75)}
footer.line nav{display:flex;flex-wrap:wrap;gap:6px 20px}
footer.line a{text-decoration:none}footer.line a:hover{color:var(--accent)}

/* the contact page */
.contact{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
@media(max-width:860px){.contact{grid-template-columns:1fr}}
form.c{display:grid;gap:14px}
form.c label{display:grid;gap:6px;font:600 .85rem/1 var(--heading);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
form.c input,form.c textarea,form.c select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:.9rem 1rem;font:400 1rem var(--body);width:100%}
form.c textarea{min-height:160px;resize:vertical}
form.c input:focus,form.c textarea:focus,form.c select:focus{border-color:var(--accent);outline:none}
.company{font-size:.85rem;color:var(--muted);line-height:1.7;border-left:2px solid var(--border);padding-left:16px}
form.c .consent{display:flex;grid-template-columns:none}
form.c .consent input{width:auto;padding:0;margin-top:4px;flex:none}

.feats li{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* the thin rail the menu plate hangs from (owner, 21. 10.), and the demo button's text black on its yellow */
@media(min-width:861px){
	.top:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;z-index:-1;
		background:linear-gradient(180deg,#1c232b 0%,#0d1116 100%);border-bottom:1px solid #2b343f;box-shadow:0 2px 6px rgba(0,0,0,.5)}
	.top{isolation:isolate}
	.top nav .btn-primary,.top nav .btn-primary:hover{color:#090c10}
}

/* Universal joined steel header v3. Assets stay local; existing navigation remains interactive. */
@media(min-width:861px){
 .top{--panel-width:min(1000px,100vw);--panel-height:calc(var(--panel-width)*246/1356);--rail-height:calc(var(--panel-width)*76/1356);min-height:var(--panel-height);padding-left:var(--gutter);padding-right:0;pointer-events:none}
 .top::before{height:var(--rail-height);background:url("header-v3/rail-repeat.webp") left top/auto 100% repeat-x;border:0;box-shadow:none;z-index:-2;pointer-events:none}
 .top::after{content:"";position:absolute;left:0;top:0;width:calc(var(--panel-width)*256/1356);height:var(--rail-height);background:url("header-v3/rail-left-end.webp") left top/100% 100% no-repeat;z-index:-1;pointer-events:none}
 .top .logo{margin-top:calc(var(--rail-height) + 8px);pointer-events:auto}
 .top .logo img{height:42px}
 .top nav{position:absolute;right:0;top:0;width:var(--panel-width);height:var(--panel-height);padding:calc(var(--panel-width)*119/1356) calc(var(--panel-width)*125/1356) 0 calc(var(--panel-width)*140/1356);align-items:flex-start;justify-content:center;gap:clamp(12px,1.3vw,22px);background:none;clip-path:none;filter:none;pointer-events:none}
 .top nav::before{inset:0;background:url("header-v3/header-right-joined.webp") right top/100% 100% no-repeat;clip-path:none;pointer-events:none}
 .top nav::after{display:none}
 .top nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;pointer-events:auto}
 .top nav .btn{min-height:44px;padding:.6rem 1rem}
 .hero-in{padding-top:180px}
}
@media(min-width:861px) and (max-width:1200px){
 .top .logo{position:relative;z-index:2;margin-top:9px;margin-left:100px;background:rgba(9,12,16,.75);padding:2px 9px;border-radius:2px}
 .top .logo img{height:28px}
}
/* Slim rail and compact menu plate. */
@media(min-width:861px){
 .top{--panel-width:min(920px,100vw);--panel-height:80px;--rail-height:28px;min-height:80px}
 .top nav{padding:31px 86px 0 92px;gap:clamp(12px,1.25vw,20px)}
 .top .logo{margin-top:38px}
 .hero-in{padding-top:132px}
}
@media(min-width:861px) and (max-width:1200px){
 .top .logo{margin-top:3px;margin-left:100px;padding:0 7px}
 .top .logo img{height:22px}
}

/* Compact desktop navigation and demo button. */
@media(min-width:861px){
 .top nav a{min-height:32px}
 .top nav .btn{min-height:32px;padding:.3rem 1rem;line-height:1.2}
}

/* Home logo aligned with the hero copy. */
.home .top .logo{position:absolute;left:var(--gutter);top:38px;margin:0;padding:0;background:none}
.home .top .logo img{width:240px;height:auto}
@media(min-width:861px) and (max-width:1200px){
 .home .top .logo{top:90px}
 .home .hero-in{padding-top:190px}
}
@media(max-width:860px){
 .home .top .logo{top:22px}
 .home .top .logo img{width:180px}
 .home .top{min-height:90px}
 .home .menu-btn{margin-left:auto}
 .home .hero-in{padding-top:115px}
}

.arena-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.arena-controls{display:flex;flex-wrap:wrap;gap:5px;padding:8px;background:var(--surface2)}
.arena-controls button{font:inherit;font-size:.75rem;color:var(--muted);background:transparent;border:1px solid var(--border);padding:7px 9px;cursor:pointer}
.arena-controls button[aria-current="true"]{color:#090c10;background:var(--accent);border-color:var(--accent)}
.arena-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Crossfade the arena pictures automatically, like the hero banner. */
.arena-gallery{display:grid;overflow:hidden}
.arena-gallery .arena-frame{grid-area:1 / 1;opacity:0;transition:opacity 1s ease;pointer-events:none;min-width:0}
.arena-gallery .arena-frame.active{opacity:1}
.arena-gallery figcaption{grid-area:2 / 1}
@media(prefers-reduced-motion:reduce){.arena-gallery .arena-frame{transition:none}}

/* Cyclic mission carousel: preserve the complete artwork. */
.mission-carousel{position:relative;padding:0 34px}
.mission-window{overflow:hidden}
.mission-track{display:flex;gap:16px;will-change:transform}
.mission-track .card{flex:0 0 calc((100% - 48px)/4);min-width:0}
.mission-track .card img{aspect-ratio:2/1;object-fit:contain;object-position:center;background:#090c10}
.mission-arrow{position:absolute;top:40%;transform:translateY(-50%);width:30px;height:48px;border:1px solid var(--border);background:var(--surface);color:var(--accent);font-size:26px;cursor:pointer}
.mission-arrow.prev{left:0}.mission-arrow.next{right:0}
.mission-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1100px){.mission-track .card{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:560px){.mission-track .card{flex-basis:100%}.mission-carousel{padding:0 32px}}

/* Center arrows in the entire margin between page edge and artwork. */
.mission-carousel{--arrow-space:34px}
.mission-arrow.prev{left:calc((var(--arrow-space) - var(--gutter))/2);transform:translate(-50%,-50%)}
.mission-arrow.next{right:calc((var(--arrow-space) - var(--gutter))/2);transform:translate(50%,-50%)}
@media(max-width:560px){.mission-carousel{--arrow-space:32px}}
/* Subtle old-film movement, limited to the picture. */
.mission-art{position:relative;overflow:hidden;isolation:isolate;flex-shrink:0}
.mission-art img{display:block}
.mission-art::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent 18%,rgba(245,235,209,.22) 18.2%,transparent 18.5%,transparent 73%,rgba(20,15,9,.35) 73.2%,transparent 73.5%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px);mix-blend-mode:soft-light}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .mission-art:hover img{animation:mission-film-jitter 1.1s steps(1,end) infinite}
 .mission-art:hover::after{opacity:.45;animation:mission-film-scratches 1.6s steps(1,end) infinite}
}
@keyframes mission-film-jitter{0%,100%{transform:scale(1.008)}18%{transform:translate(.4px,-.5px) scale(1.008)}34%{transform:translate(-.5px,.3px) scale(1.008)}52%{transform:translate(.3px,.5px) scale(1.008)}76%{transform:translate(-.3px,-.3px) scale(1.008)}}
@keyframes mission-film-scratches{0%,100%{background-position:0 0;opacity:.35}28%{background-position:19px 1px;opacity:.5}49%{background-position:-27px 0;opacity:.25}72%{background-position:38px -1px;opacity:.4}}

/* An ink stamp lands beside the home logo once on page load. */
.online-stamp{position:absolute;left:calc(var(--gutter) + 260px);top:41px;width:150px;height:83px;color:#f6df37;pointer-events:none;transform:rotate(-8deg);transform-origin:center;animation:online-stamp-land 650ms cubic-bezier(.2,.7,.2,1) both}
.online-stamp svg{display:block;width:100%;height:100%;overflow:visible}
.stamp-frame{stroke:currentColor;stroke-width:2;opacity:.8}
.stamp-stick{stroke:currentColor;stroke-width:3;opacity:.45}
.online-stamp text{fill:currentColor;stroke:#101411;stroke-width:1;paint-order:stroke fill;font-family:"Brush Script MT","Segoe Print",cursive;font-size:43px;font-style:italic;font-weight:bold}
@keyframes online-stamp-land{0%{opacity:0;transform:scale(1.85) rotate(-19deg)}48%{opacity:1;transform:scale(.94) rotate(-8deg)}67%{transform:scale(1.035) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@media(min-width:861px) and (max-width:1200px){.online-stamp{top:94px}}
@media(max-width:860px){.online-stamp{left:calc(var(--gutter) + 195px);top:26px;width:105px;height:58px}}
@media(max-width:370px){.online-stamp{left:calc(var(--gutter) + 185px);width:82px}}
@media(prefers-reduced-motion:reduce){.online-stamp{animation:none}}

/* Faint LIVE watermark behind the logo and hero lettering, under the metal rail. */
.live-watermark{position:absolute;z-index:1;pointer-events:none;left:calc(var(--gutter) + 195px);top:-26px;width:360px;height:360px;object-fit:contain;opacity:.15;animation:live-watermark-land 700ms ease-out both}
@keyframes live-watermark-land{0%{opacity:0;transform:scale(1.3)}55%{opacity:.18;transform:scale(.98)}100%{opacity:.15;transform:scale(1)}}
@media(max-width:860px){.live-watermark{left:calc(var(--gutter) + 135px);top:-24px;width:300px;height:300px;opacity:.12}}
@media(prefers-reduced-motion:reduce){.live-watermark{animation:none}}

/* Three modes as the fronts of neon gaming PCs (owner, 26. 10.): vents on top, a light bar down each side, a power button and drive bays below; the list grows from one to the next. */
.rigs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.rig{--c:22px;--glow:#29d3ff;position:relative;display:flex;flex-direction:column;padding:26px 26px 22px;
	clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
	background:linear-gradient(180deg,#151b22,#0b0f14 70%);box-shadow:inset 0 0 0 1px #2a323c}
.rig::before,.rig::after{content:"";position:absolute;top:34px;bottom:64px;width:3px;background:var(--glow);box-shadow:0 0 12px var(--glow),0 0 28px var(--glow);opacity:.9}
.rig::before{left:9px}.rig::after{right:9px}
.rig-b{--glow:var(--accent)}.rig-c{--glow:#ff2bd6}
.rig-top{display:flex;gap:6px;margin:-8px 0 18px}
.rig-top i{flex:1;height:4px;background:#232b34;box-shadow:inset 0 1px 0 #000}
.rig-status{font:600 .85rem/1 var(--heading);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.rig-status b{color:var(--glow);text-shadow:0 0 10px var(--glow)}
.rig h3{font:800 2rem/1 var(--heading);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.rig-price{color:var(--muted);font-size:.9rem;margin:0 0 18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rig-price .tag{font-size:.62rem;padding:.25rem .4rem}
.rig ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;flex:1}
.rig li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.35;color:var(--muted)}
.rig li .i{flex:none;width:18px;height:18px;margin-top:1px;color:#56606c}
.rig li.new{color:var(--text)}
.rig li.new .i{color:var(--glow);filter:drop-shadow(0 0 4px var(--glow))}
.rig .btn{align-self:flex-start;font-size:1rem;padding:.85rem 1.2rem}
.rig-bay{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:14px;border-top:1px solid #222a33}
.rig-bay .pwr{width:16px;height:16px;border-radius:50%;border:2px solid var(--glow);box-shadow:0 0 8px var(--glow)}
.rig-bay .bay{flex:1;height:8px;background:#1b222a;box-shadow:inset 0 1px 0 #000}
@media(max-width:960px){.rigs{grid-template-columns:1fr;max-width:560px}}

/* (owner, 26. 10.) */
#rezimy{padding-top:36px}
.rig h3{color:var(--glow);text-shadow:0 0 12px var(--glow),0 0 28px color-mix(in srgb,var(--glow) 50%,transparent)}
.rig-free{display:inline-block;align-self:flex-start;margin:0 0 10px;padding:.3rem .7rem;font:800 1.05rem/1 var(--heading);letter-spacing:.2em;text-transform:uppercase;color:#04140a;background:#2bff6a;box-shadow:0 0 14px #2bff6a,0 0 30px rgba(43,255,106,.45)}
.rig li.prev{color:#7dffa4}
.rig li.prev .i{color:#2bff6a;filter:drop-shadow(0 0 5px #2bff6a)}
.rig li.prev span{text-shadow:0 0 8px rgba(43,255,106,.6)}
.btn-go{--fill:#2bff6a;--ln:#16c94a;color:#04140a;animation:go-pulse 1.6s ease-in-out infinite}
.btn-go:hover{--fill:#7dffa4}
@keyframes go-pulse{0%,100%{filter:drop-shadow(0 0 4px #2bff6a)}50%{filter:drop-shadow(0 0 18px #2bff6a) brightness(1.15)}}
@media(prefers-reduced-motion:reduce){.btn-go{animation:none}}

/* (owner, 26. 10.: missions right under the hero, no heading; the pulse on a wrapper, as the button's clip-path cut its glow off) */
#misie{padding-top:28px;padding-bottom:40px}
.btn-go{animation:none}
.go-glow{align-self:flex-start;display:inline-block;animation:go-pulse 1.6s ease-in-out infinite}
@keyframes go-pulse{0%,100%{filter:drop-shadow(0 0 3px #2bff6a)}50%{filter:drop-shadow(0 0 16px #2bff6a) drop-shadow(0 0 30px rgba(43,255,106,.6)) brightness(1.18)}}
@media(prefers-reduced-motion:reduce){.go-glow{animation:none}}

.rig h3 .rig-free{margin:0 0 0 10px;vertical-align:middle;font-size:.95rem;text-shadow:none;position:relative;top:-3px}
.rig-price-free{color:#7dffa4;font-weight:600;text-shadow:0 0 8px rgba(43,255,106,.7),0 0 18px rgba(43,255,106,.35)}
.notify-glow{align-self:flex-start;display:inline-block;filter:drop-shadow(0 0 6px rgba(255,224,0,.75)) drop-shadow(0 0 16px rgba(255,224,0,.35))}

/* hero buttons (owner, 26. 10.): chat on the web (green, pulsing), beta app (orange neon, a drop-down), notify (yellow) */
.ctas{align-items:flex-start}
.btn-app{--fill:#ff8a1f;--ln:#c96400;color:#1a0b00;list-style:none}
.btn-app::-webkit-details-marker{display:none}
.dl-menu{position:relative;filter:drop-shadow(0 0 7px rgba(255,138,31,.8)) drop-shadow(0 0 18px rgba(255,138,31,.35))}
.dl-menu[open] .btn-app .i{transform:rotate(180deg)}
.dl-list{--c:10px;--fill:#120c07;--ln:#ff8a1f;position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:100%;display:grid;padding:6px}
.dl-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:.7rem .9rem;font:700 1rem/1 var(--heading);letter-spacing:.08em;text-transform:uppercase;color:#ffb877;text-decoration:none}
a.dl-item:hover{color:#fff;background:rgba(255,138,31,.15)}
.dl-item .tag{font-size:.6rem;padding:.22rem .38rem}
.dl-list{top:auto;bottom:calc(100% + 6px)} /* (opens upward: the hero clips anything below it) */
.dl-menu[open] .btn-app .i{transform:none}.btn-app .i{transform:rotate(180deg)}

/* (owner, 26. 10.) the app button yellow, both pulsing gently with a small glow; its list drops down: the hero no longer clips, the slides and the stamp clip themselves */
.hero{overflow:visible}
.slides{overflow:hidden}
.live-watermark{clip-path:inset(26px 0 0 0)}
@media(max-width:860px){.live-watermark{clip-path:inset(24px 0 0 0)}}
.hero-in{z-index:5}
.btn-app{--fill:var(--accent);--ln:#c9b000;color:#090c10}
.btn-app:hover{--fill:var(--accent-hover)}
.btn-app .i,.dl-menu[open] .btn-app .i{transform:none}
.dl-list{top:calc(100% + 6px);bottom:auto;--ln:var(--accent);--fill:#100f06}
.dl-item{color:#ffe97a}
.dl-menu{filter:none;animation:app-pulse 2.4s ease-in-out infinite}
.go-glow{animation:go-soft 2.4s ease-in-out infinite}
@keyframes go-soft{0%,100%{filter:drop-shadow(0 0 2px rgba(43,255,106,.7))}50%{filter:drop-shadow(0 0 7px rgba(43,255,106,.75))}}
@keyframes app-pulse{0%,100%{filter:drop-shadow(0 0 2px rgba(255,224,0,.7))}50%{filter:drop-shadow(0 0 7px rgba(255,224,0,.75))}}
@media(prefers-reduced-motion:reduce){.dl-menu,.go-glow{animation:none}}

/* mission hologram (site.js) */
#misie .card{cursor:pointer}
.holo{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;
	background:radial-gradient(ellipse at center,rgba(255,40,30,.16),rgba(9,12,16,.55) 70%);
	animation:holo-in .35s ease-out both,holo-flick 2.1s steps(1) infinite}
.holo.out{animation:holo-out .6s ease-in both}
.holo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,60,50,.14) 0 1px,transparent 1px 4px);animation:holo-scan 1.2s linear infinite;mix-blend-mode:screen}
.holo b{position:relative;font:800 clamp(2rem,3.4vw,3.2rem)/1 var(--heading);letter-spacing:.08em;color:#ff3a2e;text-shadow:0 0 10px #ff2e22,0 0 26px rgba(255,46,34,.7)}
.holo b::before,.holo b::after{content:attr(data-t);position:absolute;inset:0;color:#ff7a70;opacity:.75}
.holo b::before{clip-path:inset(18% 0 62% 0);animation:holo-slice 1.1s steps(1) infinite}
.holo b::after{clip-path:inset(64% 0 14% 0);animation:holo-slice 1.1s steps(1) infinite reverse}
.holo span{position:relative;font:600 .8rem/1 var(--heading);letter-spacing:.24em;text-transform:uppercase;color:#ff8a80;text-shadow:0 0 8px #ff2e22}
@keyframes holo-in{0%{opacity:0;transform:scaleY(.05)}60%{opacity:1;transform:scaleY(1.05)}100%{opacity:1;transform:none}}
@keyframes holo-out{to{opacity:0;transform:scaleY(.05)}}
@keyframes holo-flick{0%,100%{opacity:1}31%{opacity:.82}33%{opacity:1}72%{opacity:.35}73%{opacity:1}}
@keyframes holo-scan{to{background-position:0 8px}}
@keyframes holo-slice{0%{transform:none}20%{transform:translateX(7px)}24%{transform:none}55%{transform:translateX(-5px)}58%{transform:none}}
@media(prefers-reduced-motion:reduce){.holo,.holo b::before,.holo b::after,.holo::before{animation:none}}

/* (owner, 26. 10.) the hologram covers the picture whole, on and off at once */
.holo{background:#07090c;animation:holo-flick 2.1s steps(1) infinite}
.holo span{display:none}
/* menu: chat, sign up, sign in */
#nav .nav-chat{--fill:#2bff6a;--ln:#16c94a;color:#04140a;animation:none}
#nav .nav-reg{margin-left:4px}
/* O projekte: the bar's welcome sheet */
.project{padding-top:56px}
.project-text{--c:18px;--fill:var(--surface);max-width:820px;padding:30px 34px}
.project-text h3{font:800 1.6rem/1.1 var(--heading);text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:0 0 16px}
.project-text p{color:var(--muted);line-height:1.6;margin:0 0 14px}
.project-text .project-sign{color:var(--text);font-weight:600;margin:6px 0 0}
#nav .btn{padding:.5rem .8rem;font-size:.9rem}
#nav .nav-reg{margin-left:0}
/* (owner, 26. 10.) a pulse between the first and the soft one */
@keyframes go-soft{0%,100%{filter:drop-shadow(0 0 3px rgba(43,255,106,.7))}50%{filter:drop-shadow(0 0 11px rgba(43,255,106,.85)) drop-shadow(0 0 20px rgba(43,255,106,.35)) brightness(1.08)}}
@keyframes app-pulse{0%,100%{filter:drop-shadow(0 0 3px rgba(255,224,0,.7))}50%{filter:drop-shadow(0 0 11px rgba(255,224,0,.85)) drop-shadow(0 0 20px rgba(255,224,0,.35)) brightness(1.08)}}
.go-glow,.dl-menu{animation-duration:2s}
/* (owner, 26. 10.) the hero buttons glow as "Upozorniť ma" does at rest, and the pulse adds on top */
@keyframes go-soft{0%,100%{filter:drop-shadow(0 0 6px rgba(43,255,106,.75)) drop-shadow(0 0 16px rgba(43,255,106,.35))}50%{filter:drop-shadow(0 0 10px rgba(43,255,106,.9)) drop-shadow(0 0 26px rgba(43,255,106,.5)) brightness(1.08)}}
@keyframes app-pulse{0%,100%{filter:drop-shadow(0 0 6px rgba(255,224,0,.75)) drop-shadow(0 0 16px rgba(255,224,0,.35))}50%{filter:drop-shadow(0 0 10px rgba(255,224,0,.9)) drop-shadow(0 0 26px rgba(255,224,0,.5)) brightness(1.08)}}
.dl-menu{animation:none;filter:drop-shadow(0 0 6px rgba(255,224,0,.75)) drop-shadow(0 0 16px rgba(255,224,0,.35))} /* (owner: no pulse, a steady glow) */
.nav-glow{pointer-events:auto;align-self:center}
.nav-glow{align-self:flex-start;margin-top:-1px} /* (centred on the links text line) */
.nav-glow{transform:translateX(19px)} /* (owner: half a centimetre to the right) */
/* O projekte: the text with the game's intro looping beside it (owner, 26. 10.) */
.project-grid{display:grid;grid-template-columns:minmax(0,820px) minmax(0,1fr);gap:28px;align-items:start}
.project-video{--c:18px;--fill:var(--surface);margin:0;padding:2px;position:sticky;top:24px}
.project-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.project-video figcaption{font:600 .72rem/1 var(--heading);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:10px 12px 8px}
@media(max-width:1100px){.project-grid{grid-template-columns:1fr}.project-video{position:static;max-width:820px}}
/* (owner, 26. 10.) the video's frame as tall as the text's, no caption */
.project-grid{align-items:stretch}
.project-video{position:relative;top:auto;display:flex}
.project-video video{height:100%;aspect-ratio:auto}
@media(max-width:1100px){.project-video video{aspect-ratio:16/9;height:auto}}
/* (owner, 26. 10.) a narrower text, a wider video showing its right side first: the whole castle and the bridge */
.project-grid{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
.project-text{padding:26px 28px}
.project-video video{object-position:85% 50%}
@media(max-width:1100px){.project-grid{grid-template-columns:1fr}}
/* (owner, 26. 10.) the intro as the game shows it in a taller window: bunker, castle and bridge; the video keeps its own shape and the text's frame follows its height */
.project-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.project-video{display:block}
.project-video video{height:auto;aspect-ratio:1280/900;object-position:50% 50%}
@media(max-width:1100px){.project-grid{grid-template-columns:1fr}}
/* (owner, 26. 10.) on narrower screens the text gets smaller with the width, so it stays as tall as the video; the video fills the frame either way */
@media(min-width:1101px){
	.project-text{padding:clamp(16px,1.5vw,30px) clamp(18px,1.6vw,34px)}
	.project-text h3{font-size:clamp(1.05rem,1.3vw,1.6rem);margin-bottom:clamp(8px,.8vw,16px)}
	.project-text p{font-size:clamp(.7rem,.84vw,1rem);line-height:1.55;margin-bottom:clamp(6px,.7vw,14px)}
	.project-video{display:flex}
	.project-video video{height:100%;aspect-ratio:auto;object-fit:cover}
}
/* (the size is set by site.js; everything in the text follows it) */
@media(min-width:1101px){
	.project-text{padding:1.6em 1.9em}
	.project-text h3{font-size:1.55em;margin-bottom:.7em}
	.project-text p{font-size:1em;line-height:1.55;margin-bottom:.75em}
}
@media(min-width:1101px){.project-video video{height:auto;aspect-ratio:1280/900}}

/* menu (owner, 26. 10.): smaller links, SK / EN with the one shown glowing green */
.top nav > a:not(.btn){font-size:.86em}
.lang{display:inline-flex;gap:2px;align-items:center;font:700 .8rem/1 var(--heading);letter-spacing:.1em;pointer-events:auto}
.lang a{padding:4px 5px;color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--text)}
.lang a.on{color:#2bff6a;text-shadow:0 0 8px rgba(43,255,106,.85),0 0 16px rgba(43,255,106,.4)}
.lang a + a{border-left:1px solid #3a444f}
.lang{margin-left:6px}
.lang{margin-left:28px} /* (clear of the buttons shifted 19 px right) */
/* (owner, 26. 10.) the menu's items closer and evenly apart; SK | EN the size of the links */
.top nav{gap:14px!important}
.nav-glow{transform:none}
.lang{margin-left:0;gap:0;font:600 .86rem/1 var(--heading);letter-spacing:.08em}
.lang a{font:inherit;min-height:0;padding:4px 6px}
.top nav .lang a{font-size:13.76px;min-height:0}
@media(min-width:861px){.top nav{padding-top:35px}} /* (owner: the buttons centred in the plate, 32…71 px; the links with them) */
/* (owner, 26. 10.) the menu to the right, SK | EN by the plate's right edge; LOGIN and ČETOVAŤ bevelled like 3D keys */
@media(min-width:861px){.top nav{justify-content:flex-end;padding-right:112px}}
.top nav .nav-glow .btn{position:relative;
	box-shadow:inset 0 0 0 1px var(--ln),inset 2px 2px 0 rgba(255,255,255,.55),inset -2px -3px 0 rgba(0,0,0,.38),inset 0 -8px 10px -6px rgba(0,0,0,.35),inset 0 8px 10px -6px rgba(255,255,255,.35);
	text-shadow:0 1px 0 rgba(255,255,255,.35)}
.top nav .nav-glow .btn:active{box-shadow:inset 0 0 0 1px var(--ln),inset 2px 3px 0 rgba(0,0,0,.35),inset -1px -1px 0 rgba(255,255,255,.3);transform:translateY(1px)}
.top nav > a:not(.btn){font-size:17px;letter-spacing:.1em} /* (owner: the links fill the plate a little more) */
html[lang="en"] .top nav > a:not(.btn):not(.nav-reg){margin-right:19px} /* (owner: the shorter English links spread to fill the plate as the Slovak ones do) */
/* (owner, 26. 10.) the launch notification block centred */
.notify-box{margin:0 auto;text-align:center}
.notify-box .h2{justify-content:center}
.notify-box .sub{margin-left:auto;margin-right:auto}
.notify-box form.n{justify-content:center}
.notify-box .consent{justify-content:center;text-align:left;max-width:640px;margin:0 auto}
.notify-box .msg{flex-basis:100%;text-align:center}
.notify-box{max-width:1000px}.notify-box form.n{max-width:760px;margin-left:auto;margin-right:auto}
/* (owner, 26. 10.) no yellow dash before the centred title; the e-mail field's cut corner gets its edge line */
.notify-box .h2:before{display:none}
form.n input[type=email]{--edge:var(--border);background:linear-gradient(135deg,transparent calc(50% - 1px),var(--edge) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) top left/12px 12px no-repeat,var(--bg)}
form.n input[type=email]:focus{--edge:var(--accent)}
/* (owner, 26. 10.) the consent starts under the e-mail field's left edge and stays under that field only */
.notify-box form.n{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.notify-box form.n .hp{position:absolute}
.notify-box form.n input[type=email]{grid-column:1}
.notify-box .consent{grid-column:1;justify-content:flex-start;max-width:none;margin:0}
.notify-box .msg{grid-column:1 / -1}
/* (owner, 26. 10.) the menu plate drops in from above on load with a small bounce, then stays */
@media(min-width:861px){
	.top nav{animation:plate-drop .9s cubic-bezier(.2,.8,.25,1) .15s both}
}
@keyframes plate-drop{0%{transform:translateY(-110%)}62%{transform:translateY(6px)}80%{transform:translateY(-2px)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.top nav{animation:none}}
/* (owner, 26. 10.) only the plate under the top rail drops, out from behind the rail: kept clipped at the rail's lower edge (28 px) while it moves */
@keyframes plate-drop{
	0%{transform:translateY(-52px);clip-path:inset(80px 0 0 0)}
	62%{transform:translateY(5px);clip-path:inset(23px 0 0 0)}
	80%{transform:translateY(-2px);clip-path:inset(30px 0 0 0)}
	99.9%{transform:none;clip-path:inset(28px 0 0 0)}
	100%{transform:none;clip-path:none}
}
/* (owner, 26. 10.) the top rail's part of the plate picture (its yellow hatching) stays put from the start: drawn by itself above the dropping plate */
.rail-cap{display:none}
@media(min-width:861px){
	.rail-cap{display:block;position:absolute;right:0;top:0;width:var(--panel-width);height:28px;z-index:3;pointer-events:none;
		background:url("header-v3/header-right-joined.webp") right top/100% var(--panel-height) no-repeat}
}
/* (owner, 26. 10.) just the slide out, no bounce */
@keyframes plate-drop{
	0%{transform:translateY(-52px);clip-path:inset(80px 0 0 0)}
	99.9%{transform:none;clip-path:inset(28px 0 0 0)}
	100%{transform:none;clip-path:none}
}
@media(min-width:861px){.top nav{animation:plate-drop .7s cubic-bezier(.25,.7,.3,1) .15s both}}

/* START-UP (owner, 26. 10.): the plate slides down, the hero's text flies in from the left line by line,
   the picture comes up out of the dark, the hazard stripe wipes across and the mission cards roll in from the right */
@media(prefers-reduced-motion:no-preference){
	.hero .slides{animation:boot-pic 1.4s ease-out both}
	.hero-in > *{animation:boot-left .7s cubic-bezier(.2,.75,.25,1) both}
	.hero-in > .eyebrow{animation-delay:.35s}
	.hero-in > h1{animation-delay:.5s}
	.hero-in > .lead{animation-delay:.7s}
	.hero-in > .ctas{animation-delay:.85s}
	.hero-in > .feats{animation-delay:1s}
	.hero + .hazard{animation:boot-wipe .8s cubic-bezier(.6,0,.3,1) .6s both}
	.mission-carousel.boot .mission-track > .card{animation:boot-right .75s cubic-bezier(.2,.75,.25,1) both}
	.mission-carousel.boot .mission-track > .card:nth-child(1){animation-delay:.9s}
	.mission-carousel.boot .mission-track > .card:nth-child(2){animation-delay:1.05s}
	.mission-carousel.boot .mission-track > .card:nth-child(3){animation-delay:1.2s}
	.mission-carousel.boot .mission-track > .card:nth-child(4){animation-delay:1.35s}
	.mission-carousel.boot .mission-arrow{animation:boot-fade .5s ease-out 1.6s both}
}
@keyframes boot-left{0%{opacity:0;transform:translateX(-90px)}100%{opacity:1;transform:none}}
@keyframes boot-right{0%{opacity:0;transform:translateX(140px)}100%{opacity:1;transform:none}}
@keyframes boot-pic{0%{opacity:0;transform:scale(1.06);filter:brightness(.3)}100%{opacity:1;transform:none;filter:none}}
@keyframes boot-wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes boot-fade{0%{opacity:0}100%{opacity:1}}
/* (owner, 26. 10.) the missions among the first, not last */
@media(prefers-reduced-motion:no-preference){
	.mission-carousel.boot .mission-track > .card:nth-child(1){animation-delay:.1s}
	.mission-carousel.boot .mission-track > .card:nth-child(2){animation-delay:.2s}
	.mission-carousel.boot .mission-track > .card:nth-child(3){animation-delay:.3s}
	.mission-carousel.boot .mission-track > .card:nth-child(4){animation-delay:.4s}
	.mission-carousel.boot .mission-arrow{animation-delay:.7s}
	.hero + .hazard{animation-delay:.1s}
}

/* Sign up, login and the account page (owner, 26. 10.) */
.auth{padding:150px var(--gutter) 80px;display:grid;place-items:start center}
.auth-box{--c:22px;--fill:var(--surface);width:100%;max-width:520px;padding:34px 36px 26px}
.auth-box h1{font:800 2.6rem/1 var(--heading);text-transform:uppercase;margin:0 0 10px}
.auth-box .dim{color:var(--muted);margin:0 0 24px}
.auth-box form.c small{font:400 .78rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:#7f8994}
.auth-box .consent{font:400 .88rem/1.5 var(--body);letter-spacing:0;text-transform:none}
.auth-box .msg{margin:4px 0 0;min-height:1.4em}
.auth-box .msg.ok{color:#7dffa4}.auth-box .msg.err{color:#ff7a70}
.auth-alt{margin:18px 0 0;color:var(--muted);font-size:.92rem}
.auth-alt a{color:var(--accent)}
.auth-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.modes{border:1px solid var(--border);padding:12px 14px;margin:0;display:grid;gap:10px}
.modes legend{font:600 .85rem/1 var(--heading);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 6px}
form.c .mode{display:flex;gap:10px;align-items:center;font:400 .92rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--text)}
form.c .mode input{width:auto;accent-color:#2bff6a}
form.c .mode.off{color:#6d7680}
.mode .tag{font-size:.6rem;padding:.2rem .35rem;margin-left:4px}
[hidden]{display:none!important}
/* logged in: LOGIN turns into a small green LOGGED IN (owner, 26. 10.) */
#nav .nav-logged{--fill:#2bff6a;--ln:#16c94a;color:#04140a;font-size:.74rem;letter-spacing:.06em;padding:.5rem .7rem}
.notify-glow.logged-glow{filter:drop-shadow(0 0 6px rgba(43,255,106,.75)) drop-shadow(0 0 16px rgba(43,255,106,.35))}
/* chat section (owner, 27. 10.): top-aligned with its picture, the new texts and the requirements */
#chat .social{align-items:start}
#chat .sub{margin-bottom:14px}
#chat .free-line{color:#7dffa4;text-shadow:0 0 8px rgba(43,255,106,.6)}
.chat-h3{font:800 1.25rem/1.1 var(--heading);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin:22px 0 12px}
.y-line{border:0;height:3px;background:var(--accent);box-shadow:0 0 10px rgba(255,224,0,.5);margin:28px 0 6px}
.social ul.req{gap:8px}
.social ul.req li{display:block;font-size:.92rem;line-height:1.5}
.rig li.app span{color:#ffe97a}
/* the beta app list: opaque (owner, 27. 10.) */
.dl-list{--fill:#0f0e07;background-color:#0f0e07}
.dl-menu[open] .dl-list{box-shadow:0 10px 30px rgba(0,0,0,.85)}
.ctas{position:relative;z-index:10}.dl-menu{z-index:30} /* (the list over the feature line below it) */
/* sign-up / login (owner, 27. 10.): the footer at the bottom of the window; a red X back to the site */
body.subpage .page{min-height:100vh;display:flex;flex-direction:column}
body.subpage main.auth{flex:1}
.auth-box{position:relative}
.auth-x{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;background:#ff2e22;color:#fff;
	clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);box-shadow:0 0 14px rgba(255,46,34,.55);transition:filter .15s}
.auth-x:hover{filter:brightness(1.2) drop-shadow(0 0 8px #ff2e22)}
.auth-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
/* (owner, 27. 10.) modes: the APP note under a thin blue line, a star for its bullet */
.rig-note{position:relative;margin:-8px 0 20px;padding-top:12px;border-top:1px solid #29d3ff;color:var(--muted);font-size:.88rem;line-height:1.4;display:flex;gap:8px}
.rig-note::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;box-shadow:0 0 6px 0 #29d3ff;pointer-events:none} /* (owner, 31. 10.: the glow on the line only, no box round the note) */
.rig-note span{color:var(--glow);font-weight:800}
/* chat: the text fits beside the picture (site.js), the line and the requirements under the whole block */
sup.beta{display:inline-block;font:800 .56rem/1 var(--heading);letter-spacing:.12em;color:#090c10;background:var(--accent);padding:2px 4px;margin-left:3px;vertical-align:super;transform:translateY(-2px)}
#chat .chat-text{font-size:16px}
#chat .chat-text .h2{font-size:3.4em}
#chat .chat-text .sub{font-size:1.02em;line-height:1.5}
#chat .chat-text .chat-h3{font-size:1.2em;margin:1em 0 .6em}
#chat .chat-text li{font-size:1em;line-height:1.5}
#chat .y-line{margin:34px 0 4px}
#chat > .chat-h3{margin:18px 0 14px}
.req-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.req-card{--c:12px;--fill:var(--surface);padding:14px 16px;display:grid;gap:6px;align-content:start}
.req-card b{font:800 1rem/1 var(--heading);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.req-card span{color:var(--muted);font-size:.86rem;line-height:1.45}
@media(max-width:1100px){.req-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.req-row{grid-template-columns:1fr}}
/* MAIL on the account page (owner, 27. 10.) */
.auth{gap:28px}
.mail-box{max-width:980px}
.mail-h{font:800 2rem/1 var(--heading);text-transform:uppercase;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.mail-badge{font:800 .8rem/1 var(--heading);background:#ff2e22;color:#fff;padding:4px 7px}
.mail-grid{display:grid;grid-template-columns:260px 1fr;gap:16px;min-height:360px}
.mail-list{border:1px solid var(--border);overflow:auto;max-height:520px}
.mail-conv{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border);padding:10px 12px;color:var(--text);cursor:pointer;font:400 .9rem/1.35 var(--body)}
.mail-conv:hover,.mail-conv.on{background:rgba(255,224,0,.08)}
.mail-conv b{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.mail-conv b i{font-style:normal;background:#ff2e22;color:#fff;font-size:.7rem;padding:1px 6px}
.mail-conv span{display:block;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-thread{display:flex;flex-direction:column;gap:10px;min-width:0}
.mail-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:38px}
.mail-top b{font:700 1.1rem/1 var(--heading);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.mail-del{padding:.45rem .7rem;font-size:.8rem;--ln:#7a2a24;color:#ff8a80}
.mail-msgs{flex:1;border:1px solid var(--border);padding:12px;overflow:auto;max-height:360px;display:flex;flex-direction:column;gap:8px}
.mail-msg{max-width:80%;padding:8px 12px;background:#161c23;align-self:flex-start;font-size:.92rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.mail-msg.mine{align-self:flex-end;background:rgba(255,224,0,.12)}
.mail-msg small{display:block;color:#7f8994;font-size:.7rem;margin-top:4px}
.mail-form textarea{min-height:80px}
@media(max-width:760px){.mail-grid{grid-template-columns:1fr}}
/* (owner, 31. 10.: on the phone the buttons' words came out pale, washed by the glow's filter; there: no filter
   glow, the words black, as on the computer) */
@media (hover:none), (max-width:860px){
	.go-glow, .notify-glow, .nav-glow{animation:none; filter:none}
	.btn-go, .btn-primary, .btn-app{color:#090c10; -webkit-text-fill-color:#090c10; text-shadow:none}
	.btn-go .i, .btn-primary .i, .btn-app .i{color:#090c10}
}
/* (owner, 31. 10.) the phone's menu: HOME first in it; the language switch always on the screen at the top right,
   under it a button as wide that opens the menu; a tap outside the menu closes it (site.js) */
.top nav a.nav-home, .top .lang-m{display:none}
@media(max-width:860px){
	.top nav a.nav-home{display:block}
	.top .lang-m{display:inline-flex;position:absolute;z-index:31;top:16px;right:var(--gutter);width:88px;justify-content:center;margin:0;border:1px solid var(--border);background:var(--surface2)}
	.top .lang-m a{flex:1;text-align:center;padding:7px 0}
	.top .menu-btn{position:absolute;z-index:31;top:52px;right:var(--gutter);width:88px;margin:0;display:flex;justify-content:center;border:1px solid var(--border);background:var(--surface2);padding:4px 0}
	.top .menu-btn .i{width:26px;height:26px}
	.home .menu-btn{margin-left:0}
	.top nav{top:94px}
	.top nav .lang{display:none}
}

/* (owner, 31. 10.) the 3D CHAT ARENA card: beside "enter", the app's download in the card's own blue */
.rig-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.dl-blue{animation:none;filter:drop-shadow(0 0 6px rgba(41,211,255,.7)) drop-shadow(0 0 16px rgba(41,211,255,.3))}
.dl-blue .btn-app{--fill:#29d3ff;--ln:#0e9fc9;color:#04121a}
.dl-blue .btn-app:hover{--fill:#7fe6ff}
.dl-blue .dl-list{--ln:#29d3ff;--fill:#06121a;background-color:#06121a}
.dl-blue .dl-item{color:#9feaff}
.dl-blue a.dl-item:hover{background:rgba(41,211,255,.15)}
.dl-blue .dl-list{top:auto;bottom:calc(100% + 6px)} /* (opens upward: the card clips below) */

/* (owner, 1. 11.) STIAHNI BETA APP: green and pulsing, as "enter" was (the web chat is gone) */
.dl-menu,.dl-blue{animation:go-soft 2.4s ease-in-out infinite;filter:none}
.dl-menu .btn-app,.dl-blue .btn-app{--fill:#2bff6a;--ln:#16c94a;color:#04140a;animation:go-pulse 1.6s ease-in-out infinite}
.dl-menu .btn-app:hover,.dl-blue .btn-app:hover{--fill:#7dffa4}
.dl-menu .dl-list,.dl-blue .dl-list{--ln:#2bff6a;--fill:#06140a;background-color:#06140a}
.dl-menu .dl-item,.dl-blue .dl-item{color:#9dffbd}
.dl-menu a.dl-item:hover,.dl-blue a.dl-item:hover{background:rgba(43,255,106,.15)}
@media(prefers-reduced-motion:reduce){.dl-menu,.dl-menu .btn-app{animation:none}}

/* (owner, 1. 11.) the line over the note in each card's own colour (--glow: cyan, yellow, pink) */
.rig .rig-note{border-top-color:var(--glow)}
.rig .rig-note::before{box-shadow:0 0 6px 0 var(--glow)}
.dl-blue .dl-list{position:static;margin-top:6px;top:auto;bottom:auto} /* (owner, 1. 11.: in the card it drops down, the card grows with it) */
/* (owner, 1. 11.) over everything instead: the card keeps its size; while it is open the card's corner cut lets it out */
.dl-blue .dl-list{position:absolute;margin-top:0;top:calc(100% + 6px);bottom:auto}
.rig:has(.dl-blue[open]){clip-path:none;z-index:30}
.dl-item{white-space:nowrap;font-size:.85rem}.dl-list{min-width:max-content} /* (owner, 1. 11.: each on one line, the sizes too) */