/* Krak Multiplayer landing page (/) and the /app placeholder; loaded after kraken.css.
   Direction: a flat poster. A night-purple sky with pixel stars carries the first screen with the brand line
   set large, the app's real screens rise out of an evening skyline, then flat fields of the brand palette
   (ink, surface, gold for Plus) take turns down the page. Brand: design/brand/guide (tokens, voice,
   logo rules: the mark is never tilted, cropped or set on orange). Mobile first; no script. */
:root{
  --orange:#FF6A3D;--on-orange:#1A0B05;--gold:#FFB020;--on-gold:#1A1203;--ink:#0A0F12;--snow:#ECF2F4;
  --bezel:#2A3A43;--sec:clamp(72px,9.5vw,144px);--wide:1320px;
  /* the hero's night (the app's Halloween theme family): deep at the top, warmer violet at the skyline */
  --night-0:#07050F;--night-1:#120B26;--night-2:#22134A;--night-3:#3A1F66;--on-night:#F4F0FF;
}
@media (prefers-color-scheme: light){:root{--bezel:#0E1518}}
.home .wrap{max-width:var(--wide)}

/* ---- header over the night sky ---- */
.home .top{position:absolute;left:0;right:0;top:0;z-index:6;margin:0 auto}
.home .top .brand,.home .nav a{color:var(--on-night)}
.home .nav a{opacity:.8;transition:opacity .15s}
.home .nav a:hover{opacity:1}
.home .langs summary{background:rgba(255,255,255,.08);border-color:transparent;color:var(--on-night)}
.home .langs-menu a[aria-current="true"]{background:var(--orange);color:var(--on-orange)}
.home .btn-login{background:var(--snow);color:var(--ink)}
.home .hero :focus-visible,.home .top :focus-visible{outline-color:var(--on-night)}
.plus :focus-visible,.discord :focus-visible{outline-color:var(--on-orange)}

/* ---- type ---- */
.h-xl{font:700 clamp(28px,3.7vw,54px)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
.h-poster{font:700 clamp(34px,7.2vw,104px)/.98 var(--display);letter-spacing:-.035em;text-wrap:balance}
.h-center{text-align:center}
.h-xl+.lede,.h-poster+.lede{margin-top:20px}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:46ch}
.aside{margin-top:18px;font-size:17px;color:var(--text2);max-width:52ch}
.statement{font:400 clamp(20px,2vw,26px)/1.45 var(--ui);max-width:36ch}

/* ---- buttons ---- */
.btn-xl{height:64px;padding:0 28px;border-radius:18px;font-size:18px}
.btn-xl .ic,.btn-xl .brandmark{width:24px;height:24px}
.btn-ink{background:var(--on-orange);color:var(--snow)}
.btn-onfield{background:rgba(26,11,5,.1);color:var(--on-orange)}
.btn-onfield:hover{background:rgba(26,11,5,.16)}

/* ---- screenshots: real renders of the app (static/landing), a plain bezel so dark screens read on dark fields ---- */
.shot{display:block;height:auto;max-width:100%;background:var(--ink)}
.shot-phone{border:clamp(5px,.6vw,8px) solid var(--bezel);border-radius:clamp(22px,2.6vw,36px)}
.shot-pc{border:clamp(4px,.45vw,6px) solid var(--bezel);border-radius:clamp(12px,1.2vw,18px)}
.hero .shot{border-color:var(--night-0)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;color:var(--on-night);
  background:radial-gradient(90% 60% at 82% 4%,rgba(150,96,255,.2),transparent 62%),
    radial-gradient(70% 45% at 50% 100%,rgba(255,106,61,.16),transparent 70%),
    linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 34%,var(--night-2) 70%,var(--night-3) 100%);
  padding-top:calc(92px + clamp(12px,4vw,56px))}
.hero .btn-ink{background:var(--orange);color:var(--on-orange)}
.hero .btn-ink:hover{background:#FF7C54}
.hero .btn-onfield{background:rgba(255,255,255,.08);color:var(--on-night)}
.hero .btn-onfield:hover{background:rgba(255,255,255,.14)}
.hero-lead,.hero-status{color:rgba(244,240,255,.86)}
/* pixel stars: fixed art, a few twinkle when motion is welcome */
.stars{position:absolute;inset:0 0 auto 0;width:100%;height:78%;z-index:0;display:block;pointer-events:none}
.st-s{fill:#fff;opacity:.45}
.st-m{fill:#fff;opacity:.7}
.st-b{fill:#FFE6A8;opacity:.9}
.st-tw{fill:#fff;opacity:.85}
@media (prefers-reduced-motion: no-preference){
  .st-tw{animation:twinkle 4.8s ease-in-out infinite}
  .st-tw1{animation-delay:-1.6s;animation-duration:5.6s}
  .st-tw2{animation-delay:-3.1s;animation-duration:6.4s}
}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.15}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.hero-title{--em:8.5;font:700 min(calc((min(100vw,var(--wide)) - 2*var(--gutter))/var(--em)),128px)/.98 var(--display);letter-spacing:-.035em;margin:0}
.hero-title:lang(uk){--em:9.1}
.hero-title:lang(ru){--em:10.45}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title .ln>span{display:inline-block}
.hero-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:36ch}
.hero-cta{margin-top:24px;display:flex;flex-direction:column;gap:10px;max-width:420px}
.hero-cta .btn-xl{width:100%}
.hero-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-alt .btn{height:52px;font-size:16px}
/* "Testing on Google Play" (0.9.1) takes a row of its own on phones and may wrap in a long language. */
.hero-alt .btn-play{grid-column:1/-1;white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:52px;padding-block:8px}
/* "App Store" (0.9.7) and "More options" share the last row on phones; a long language wraps the label. */
.hero-alt .btn-appstore,.hero-alt .btn-more{white-space:normal;text-align:center;line-height:1.2;height:auto;min-height:52px;padding:8px 14px}
.hero-status{margin-top:16px;font-size:15px;line-height:1.45;max-width:40ch;opacity:.86}
.hero-status a{color:inherit;font-weight:600}
.hero-shots{position:relative;margin:12px auto 0;width:100%;max-width:560px;aspect-ratio:10/9}
.hero-shots .shot-pc{position:absolute;right:0;top:0;width:88%;z-index:2}
.hero-shots .shot-phone{position:absolute;left:0;top:18%;width:40%;z-index:3}
.skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(84px,13vw,190px);z-index:0;display:block}
.sky-b{fill:var(--bg)}
.sky-w{fill:var(--gold)}
@media (prefers-color-scheme: light){.sky-w{fill:var(--orange)}}
.hero-grid>*{position:relative;z-index:3}
.hero-grid>.hero-shots{z-index:auto}
@media (min-width:720px){
  .hero-cta{flex-direction:row;flex-wrap:wrap;max-width:none;align-items:center}
  .hero-cta .btn-xl{width:auto}
  .hero-alt{display:flex;flex-wrap:wrap;gap:10px}
  .hero-alt .btn{height:64px;padding:0 22px;border-radius:18px}
}
@media (min-width:1024px){
  .hero{padding-top:calc(96px + clamp(24px,3vw,48px))}
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3vw,48px);row-gap:28px}
  .hero-title{grid-column:1/-1}
  .hero-copy{padding-bottom:clamp(140px,14vw,210px)}
  /* The phone reaches back into the copy column by up to a fifth of its width (left:-14% of the wider column). */
  .hero-status{max-width:min(40ch,80%)}
  .hero-alt{max-width:80%}
  .hero-shots{margin:0;max-width:none;aspect-ratio:auto;align-self:stretch;min-height:480px}
  .hero-shots .shot-pc{top:8px;width:100%}
  .hero-shots .shot-phone{left:-14%;top:30%;width:33%}
}

/* Halloween: three pixel bats flying off the end of the headline (landing.go halloween). */
.hero-title .ln>.bats{color:var(--orange);display:inline-flex;align-items:flex-start;gap:.1em;margin-inline-start:.16em;vertical-align:.42em}
.bat{fill:currentColor;width:.42em;height:.19em}
.bat-b{width:.3em;height:.14em;margin-top:.2em}
.bat-c{width:.2em;height:.09em;margin-top:-.02em}

/* ---- sections ---- */
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.relay,.pc,.profile,.get{background:var(--surface)}
.how-grid,.split,.safety-grid,.faq-grid,.plus-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}

/* how it works: a real sequence (ol), then the live thing (the invite code form) */
.how-steps{list-style:none;margin:36px 0 0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:28px}
.how-steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px}
.how-steps li::before{content:counter(s);grid-row:span 2;font:700 30px/1 var(--display);color:var(--accent)}
.how-steps h3{font:700 20px/1.3 var(--ui)}
.how-steps p{margin-top:6px;color:var(--text2);max-width:48ch}
.join{margin-top:44px;padding:clamp(20px,2.4vw,28px);border-radius:24px;background:var(--surface2);max-width:560px}
.join label{display:block;font:700 19px/1.3 var(--ui)}
.join-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.join-row input[type=text]{flex:1 1 200px;min-width:0;height:56px;padding:0 18px;border-radius:16px;border:0;background:var(--bg);color:var(--text);
  font:600 20px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.join-row input::placeholder{color:var(--text3);opacity:.8}
.join-row .btn{flex:0 0 auto}
.join-hint{margin-top:10px;font-size:15px;color:var(--text2)}
.how-shots{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1.08}
.how-shots .shot{position:absolute;width:56%}
.how-a{left:0;top:0;z-index:2}
.how-b{right:0;top:12%;z-index:1}

/* relay: the statement and the route it takes */
.relay-grid{margin-top:clamp(28px,4vw,56px);display:grid;gap:40px;align-items:center}
.route{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:420px}
.node{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:20px;background:var(--surface2)}
.node-k{font-size:14px;color:var(--text2)}
.node-v{font:700 20px/1.3 var(--ui)}
.node-ip{font:600 14px/1.4 var(--ui);color:var(--online);font-variant-numeric:tabular-nums}
.node-relay{background:var(--orange);color:var(--on-orange)}
.node-relay .node-k,.node-relay .node-ip{color:var(--on-orange)}
.hop{display:flex;align-items:center;justify-content:center;height:56px;position:relative}
.hop::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-2px;border-left:4px dotted var(--text3);opacity:.6}
.hop span{position:relative;padding:5px 10px;border-radius:10px;background:var(--surface);font:600 14px/1 var(--ui);color:var(--online);font-variant-numeric:tabular-nums}
.pair{margin:clamp(40px,5vw,72px) 0 0;display:grid;gap:28px}
.pair dt,.points dt,.trio dt,.safe-list dt,.get-notes dt{font:700 20px/1.3 var(--ui)}
.pair dd,.points dd,.trio dd,.safe-list dd,.get-notes dd{margin:6px 0 0;color:var(--text2);max-width:48ch}
@media (min-width:720px){
  .pair{grid-template-columns:1fr 1fr;gap:40px}
}
@media (min-width:1024px){
  .relay-grid{gap:56px}
  .route{flex-direction:row;align-items:center;max-width:none}
  .route .node{flex:1 1 0;min-width:0}
  .hop{height:auto;width:96px;flex:0 0 96px}
  .hop::before{left:0;right:0;top:50%;bottom:auto;margin:-2px 0 0;border-left:0;border-top:4px dotted var(--text3)}
}

/* worlds and servers: two phones overlapping */
.points{margin:32px 0 0;display:flex;flex-direction:column;gap:24px}
.duo{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1.1}
.duo .shot{position:absolute;width:54%}
.duo-a{left:0;top:0;z-index:2}
.duo-b{right:0;top:14%;z-index:1}

/* a server on the PC: the window runs off the right edge and the bottom */
.pc{padding-bottom:0;overflow:hidden}

.pc-bleed{margin-top:clamp(40px,5vw,72px);padding-left:var(--gutter);margin-right:-12vw}
.pc-bleed .shot{width:100%;max-width:1500px;aspect-ratio:16/8.4;object-fit:cover;object-position:0 0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (min-width:1024px){
  .pc-copy{max-width:880px}
  .pc-copy .lede{max-width:52ch}
  .pc-bleed{padding-left:max(var(--gutter),calc((100vw - var(--wide))/2 + var(--gutter)));margin-right:-8vw}
}

/* social: three screens dropped under the line */
.social{overflow:hidden}
.prints{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:0;margin-top:clamp(32px,5vw,64px);padding:0 var(--gutter);height:clamp(400px,52vw,640px);overflow:hidden}
.print{width:clamp(180px,22vw,300px);flex:0 0 auto;transition:transform .2s cubic-bezier(.2,0,0,1)}
.print-a{rotate:-6deg;margin-right:-6%;margin-top:6%;z-index:1}
.print-b{z-index:2}
.print-c{rotate:5deg;margin-left:-6%;margin-top:9%;z-index:1}
.print:hover{rotate:0deg;z-index:3}
.trio{margin:clamp(40px,5vw,64px) 0 0;display:grid;gap:28px}
@media (min-width:720px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
@media (max-width:719px){.print-a,.print-c{rotate:0deg}}
@media (max-width:519px){.print-c{display:none}.print{width:52vw}.print-a{margin-top:8%}}

/* profile: one phone and two close crops */
.board{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px;max-width:620px;width:100%;margin:0 auto}
.board-a{grid-row:span 2;width:100%}
.crop{border-radius:clamp(18px,2vw,28px);overflow:hidden;background:var(--ink);border:clamp(5px,.6vw,8px) solid var(--bezel);aspect-ratio:1/1}
.crop img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.board-b img{object-position:50% 8%}
.board-c img{object-position:50% 72%}

/* Krak Plus: the gold field, Plus's own colour */
.plus{background:var(--gold);color:var(--on-gold)}
.plus .lede,.plus .aside{color:var(--on-gold)}
.plus .aside{opacity:.82}
.perks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:640px}
.perks li{position:relative;padding-inline-start:30px;font-size:17px;line-height:1.45}
.perks li::before{content:"";position:absolute;inset-inline-start:0;top:.3em;width:14px;height:14px;border-radius:4px;background:var(--on-gold)}
.plus .shot{border-color:var(--on-gold);width:min(100%,340px);margin:0 auto}

/* safety: a plain list, read top to bottom */
.safety-grid{margin-top:clamp(40px,5vw,72px)}
.safety-head{display:grid;align-content:start}
.safety-shot{width:min(72%,300px)}
.safe-list{margin:0;display:grid;gap:30px}
.safe-list a{font-weight:600}
@media (min-width:720px){.safe-list{grid-template-columns:1fr 1fr;gap:40px 48px}}

/* the close: the mark, the line, every platform */
.get-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.mark-box{width:clamp(150px,18vw,232px);aspect-ratio:1/1;display:grid;place-items:center;margin-bottom:clamp(28px,3.5vw,48px)}
.mark-box picture{display:contents}
.mark-box .mark{width:89.4%;height:auto}
.mark-box-hw .mark{width:100%}
.get-lede{margin:22px auto 0}
.get-list{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;gap:12px;width:100%;max-width:1040px}
.get-btn{display:flex;align-items:center;gap:16px;height:100%;min-height:88px;padding:18px 22px;border-radius:22px;background:var(--surface2);color:var(--text);text-decoration:none;text-align:start;
  transition:transform .15s cubic-bezier(.2,0,0,1),background .15s}
.get-btn:hover{opacity:1;transform:translateY(-2px);background:var(--surface3)}
.get-btn:active{transform:translateY(1px)}
.get-btn .ic,.get-btn .brandmark{width:30px;height:30px;flex-shrink:0}
.get-btn b{display:block;font:700 18px/1.25 var(--ui)}
.get-btn small{display:block;margin-top:3px;font-size:14px;color:var(--text2)}
.get-primary{background:var(--accent);color:var(--on-accent)}
.get-primary:hover{background:var(--accent)}
.get-primary small{color:var(--on-accent);opacity:.8}
.get-notes{margin:clamp(28px,3.5vw,44px) 0 0;display:grid;gap:20px;text-align:center}
.get-notes dd{margin-left:auto;margin-right:auto}
.get-status{margin-top:28px;font-size:15px;color:var(--text3)}
@media (min-width:720px){.get-list{grid-template-columns:repeat(3,minmax(0,1fr))}.get-notes{grid-template-columns:1fr 1fr;gap:48px}}

/* FAQ: answers in filled blocks, no rules */
.faq-sec .faq{margin-top:0;border-top:0;display:flex;flex-direction:column;gap:8px}
.faq-sec .faq details{border-bottom:0;border-radius:18px;background:var(--surface);padding:0 22px}
.faq-sec .faq details[open]{background:var(--surface2)}
.faq-sec .faq summary{font-size:clamp(17px,1.4vw,19px);padding:20px 0}
.faq-sec .faq details p{padding-bottom:22px}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .faq-grid .h-xl{position:sticky;top:32px}
}

/* Discord: the orange field again, small */
.discord{background:var(--orange);color:var(--on-orange)}
.discord-grid{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);display:grid;gap:28px;align-items:center}
.discord .lede{margin-top:12px}
.discord .btn-primary{background:var(--on-orange);color:var(--snow);justify-self:start}
@media (min-width:1024px){.discord-grid{grid-template-columns:1fr auto;gap:48px}}

/* desktop splits */
@media (min-width:1024px){
  .how-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .split-rev{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .split-rev .split-copy{order:2}
  .safety-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}
  .plus-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}
.home .foot{border-top:0}

/* /app: the web app is coming */
.app-soon{padding-top:clamp(32px,8vw,120px);padding-bottom:clamp(64px,10vw,160px);display:grid;gap:48px;align-items:center}
.app-soon .mark-box{display:none}
@media (min-width:1024px){.app-soon{grid-template-columns:minmax(0,1fr) auto}.app-soon .mark-box{display:grid;width:clamp(200px,20vw,280px);margin:0}}
.app-card{max-width:760px}
.app-card .lede{margin-top:20px}
.app-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.app-back{margin-top:28px;font-weight:600}
.app-user{margin-top:16px;font-size:18px;color:var(--text2)}
.app-user b{color:var(--text);font-weight:700;overflow-wrap:anywhere}

/* /app/login: the hero's night sky behind the sign-in card (the card keeps the page theme) */
.sky-band{position:relative;overflow:hidden;color:var(--on-night);
  background:radial-gradient(80% 60% at 85% 0%,rgba(150,96,255,.22),transparent 62%),
    radial-gradient(70% 50% at 40% 100%,rgba(255,106,61,.16),transparent 70%),
    linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 38%,var(--night-2) 78%,var(--night-3) 100%);
  padding:clamp(28px,6vw,88px) 0 clamp(44px,8vw,112px)}
.sky-band .stars{height:100%}
.login-wrap{position:relative;z-index:1;display:flex;justify-content:center}
.login-card{width:100%;max-width:480px;color:var(--text);box-shadow:0 28px 72px rgba(7,5,15,.5)}
.login-h{font:600 clamp(24px,4.4vw,32px)/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
.login-card .lead{margin-top:10px}
.login-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--text3);font-size:13px;font-weight:600}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-google .btn{gap:12px}
.login-guest{margin-top:22px}
.login-alt{margin-top:14px;font-weight:600}
.login-alt a{color:var(--link)}
.login-legal{margin-top:10px;font-size:13px;color:var(--text3)}
.login-legal a{color:var(--text2)}
.login-note{margin-bottom:14px}
.login-app{margin-top:6px}
.login-app a{color:var(--link);font-weight:600}
/* the sign-up form (0.9.7) */
.login-card .field .hint,.login-card .field .error{margin-top:-2px}
.login-card .field input[aria-invalid="true"]{border-color:var(--danger)}
.check-field{display:grid;grid-template-columns:24px 1fr;gap:6px 12px;align-items:start}
.check-field input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.check-field label{font-size:14px;line-height:1.45;color:var(--text2)}
.check-field label a{color:var(--link)}
.check-field .error{grid-column:2}

/* ---- motion: the headline rises line by line, then each section's parts as they come into view ---- */
@media (prefers-reduced-motion: no-preference){
  .hero-title .ln>span{animation:ln-rise .9s cubic-bezier(.16,1,.3,1) both}
  .hero-title .ln+.ln>span,.hero-title .ln:nth-child(2)>span{animation-delay:.11s}
  .hero-copy,.hero-shots .shot-pc{animation:fade-up .7s cubic-bezier(.16,1,.3,1) .32s both}
  .hero-shots .shot-phone{animation:fade-up .8s cubic-bezier(.16,1,.3,1) .44s both}
  @supports (animation-timeline:view()){
    .sec h2,.sec .lede,.sec .statement,.how-steps li,.join,.route,.pair>div,.points>div,.trio>div,.safe-list>div,.perks,
    .duo .shot,.how-shots .shot,.board>*,.print,.pc-bleed .shot,.plus .shot,.safety-shot,.get-list li,.mark-box,.faq details{
      animation:fade-up linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes ln-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}