:root{
    --void:#140f1f;
    --void-soft:#1d1730;
    --void-soft-2:#271d3d;
    --sun:#ff7b3e;
    --sun-warm:#ffb14d;
    --cosmic:#56A7F2;
    --cream:#f6ecd9;
    --muted:#b6a8d1;
    --muted-dim:#9689b5;
    --line:rgba(246,236,217,0.14);
    --line-strong:rgba(246,236,217,0.28);
    --shadow:rgba(10,6,20,0.55);
    --alarm:#FC981E;
  }

  *{box-sizing:border-box;}
  html{background:var(--void);scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--void);
    color:var(--cream);
    font-family:"Manrope",system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:"Unbounded",system-ui,sans-serif;
    text-wrap:balance;
    margin:0;
  }
  p{margin:0;}
  a{color:inherit;}
  ::selection{background:var(--sun);color:var(--void);}

  .eyebrow{
    font-family:"Space Mono",monospace;
    font-size:0.78rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--cosmic);
    margin:0 0 0.9rem;
  }
  .container{
    max-width:1120px;
    margin:0 auto;
    padding:0 clamp(1.25rem,4vw,3rem);
  }
  .section{padding:clamp(4rem,9vw,7rem) 0;position:relative;}
  .section h2{
    font-size:clamp(1.9rem,4vw,2.8rem);
    font-weight:800;
    letter-spacing:-0.01em;
    margin-bottom:1.1rem;
  }
  .accent-garwolin{color:var(--alarm);}
  .accent-neptun{color:var(--cosmic);}

  /* Napis-trasa (SZYDŁOWO > GARWOLIN > NEPTUN): jeśli mieści się w jednej linii,
     zostaje w rzędzie; jeśli nie, JS dokłada .is-stacked i każde miasto trafia
     na własną linię, każda oprócz ostatniej zakończona " >" (patrz checkRouteWrap
     w js/main.js). */
  .route-heading{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:hidden;
  }
  .route-heading .route-item{white-space:nowrap;}
  .route-heading .route-item:not(:last-child)::after{content:" >\00a0";}
  .route-heading.is-stacked{
    flex-direction:column;
    align-items:flex-start;
    overflow-x:visible;
  }
  .lede{
    max-width:62ch;
    color:var(--muted);
    font-size:1.25rem;
    margin-bottom:2.8rem;
  }

  /* ---------- scanline overlay ---------- */
  /* ---------- page loader ---------- */
  html.is-loading,
  html.is-loading body{
    overflow:hidden;
    height:100%;
  }
  .page-loader{
    position:fixed;inset:0;
    /* 100dvh zamiast polegania samo na inset:0 - na mobile, gdy pasek adresu
       chowa się/pojawia w trakcie ładowania, 100vh potrafiłoby "skakać" wraz z nim. */
    height:100vh;height:100dvh;
    z-index:30000;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1.4rem;
    background:var(--void);
    transition:opacity 0.6s ease, visibility 0.6s ease;
  }
  .page-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .page-loader-logo{
    width:clamp(90px,18vw,160px);
    height:auto;
    filter:brightness(0) invert(1);
    animation:page-loader-drift 3.2s ease-in-out infinite;
  }
  .page-loader-counter{
    font-family:"Space Mono",monospace;
    font-size:1.1rem;
    letter-spacing:0.08em;
    color:#fff;
    font-variant-numeric:tabular-nums;
    min-width:2.5ch;
    text-align:center;
  }
  @keyframes page-loader-drift{
    0%{transform:translate(0,0) rotate(-3deg);}
    50%{transform:translate(6px,-16px) rotate(3deg);}
    100%{transform:translate(0,0) rotate(-3deg);}
  }
  @media (prefers-reduced-motion:reduce){
    .page-loader-logo{animation:none;}
  }

  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:80;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode:overlay;
    opacity:0.5;
  }
  @media (max-width:820px){
    /* mix-blend-mode wymusza przekompozytowanie całego ekranu przy każdym repaincie
       pod spodem - podczas gry to każda klatka canvasu. Na telefonie to zauważalnie
       kosztowniejsze niż sam blend jest wart, więc wyłączamy ziarno całkowicie. */
    .grain{ display:none; }
  }

  /* ---------- custom cursor ---------- */
  @media (pointer:fine){
    body{cursor:none;}
    #media{cursor:auto;}
  }
  .site-cursor{
    position:fixed;
    top:0;left:0;
    width:0;height:0;
    /* Musi być zawsze najwyższą warstwą, żeby mix-blend-mode:difference na kropce
       (patrz .site-cursor-dot) odwracał kolory wszystkiego pod spodem, łącznie z HUD-em
       gry meteorytów i ekranem końca gry (do 10002). */
    z-index:20000;
    pointer-events:none;
    opacity:0;
  }
  .site-cursor-dot{
    position:absolute;
    top:0;left:0;
    width:10px;height:10px;
    margin:-5px 0 0 -5px;
    border-radius:50%;
    /* backdrop-filter zamiast mix-blend-mode: próbkuje faktycznie wyrenderowane piksele
       za kropką na poziomie kompozytora, więc - w przeciwieństwie do mix-blend-mode -
       poprawnie odwraca też treść canvasu WebGL (słońce renderowane przez Three.js),
       nad którym mix-blend-mode w ogóle nie działał w wielu przeglądarkach. Tło musi
       być przezroczyste, inaczej zasłoniłoby odwrócone tło pod spodem. */
    background:transparent;
    backdrop-filter:invert(1);
    -webkit-backdrop-filter:invert(1);
    transition:width .15s ease, height .15s ease, margin .15s ease;
  }
  .site-cursor.is-hover .site-cursor-dot{
    width:28px;height:28px;
    margin:-14px 0 0 -14px;
  }

  /* ---------- corner logo ---------- */
  .corner-logo{
    position:fixed;
    /* Ten sam margines co .nav-toggle (patrz niżej) - obie pływające kontrolki mają
       trzymać ten sam odstęp od krawędzi ekranu. */
    top:clamp(1.25rem,4vw,3rem);
    left:clamp(1.25rem,4vw,3rem);
    z-index:15000;
    width:96px;height:58px;
    background:transparent;
    /* Sama sylwetka UFO (svg/solarsi-logo.svg) jako maska - w środku niej widać
       odwrócone kolory tego, co jest pod spodem (ta sama technika co .site-cursor-dot),
       zamiast zwykłego, płasko wyrenderowanego logo. */
    backdrop-filter:invert(1);
    -webkit-backdrop-filter:invert(1);
    -webkit-mask-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDU0NCAzMzAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsLTI3MDYuMTM0MjM3LC0xODEuNTg0ODE2KSI+CiAgICAgICAgPGcgaWQ9Im9kcGFkYTEiIHRyYW5zZm9ybT0ibWF0cml4KDAuNDgxMzgxLDAuMDE2MDk0LC0wLjAxNjA5NCwwLjQ4MTM4MSwyMTEwLjU2NzgxNiwtMTM4MC4yOTIyOSkiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTU3Ni4yMzcsMzU4Mi4zMDdDMTU3OS42NDgsMzU4MC40NzcgMTU4My4wMDYsMzU3OC42ODUgMTU4Ni4yOTQsMzU3Ni45MzdDMTYwMi43NjgsMzU2OC4xODEgMTYxNy40OTYsMzU2MC41NDIgMTYyOC41MjcsMzU1NC44ODFMMTU4Mi4xMDksMzU0MC44MjVMMTQ2Mi43NzQsMzQ2Ny45MTJMMTQ2Mi41MzcsMzQ2OC4yMDlMMTQ1Ni45OTgsMzQzOS4yM0wxNDI5LjE2MSwzNDQ2LjA4TDEzNzAuOTg5LDM0OTUuODAxTDEzNTQuODIyLDM0ODYuOTk3TDEzODAuMjQzLDM0NTUuMDc0TDEzODguMTMsMzQyMS45ODdMMTM5NS4zMDMsMzM4MS44NzNMMTQyNS4xODksMzM2My41NjJMMTQ0Ny4zMDIsMzMyOC4wOTFMMTUwMC41MjIsMzMwNi4wNjdMMTUyMi4yOCwzMzI3LjY5OUwxNTA5LjcxOCwzMzY0Ljg3OEwxNDg0LjM2NywzMzkwLjlMMTQ5OC4wNDIsMzQwOC4xMjlMMTUwNC4xNTcsMzQxNC4zMjdMMTUwNC4yNzksMzQxNC4xODVMMTYwNS42NTQsMzQ4My4wMTVMMTY5My42MDksMzUxNS42NjJMMTcyNy4yNDIsMzUxMi42MTRMMTcyNS4yNDcsMzQ0NS40MDhMMTcwOC4xMywzNDQ1LjQyMkwxNjY5Ljg3LDM0MDkuNjM4TDE2NjcuNDE2LDMzNTMuODMyTDE3MDAuNzUxLDMzMTIuNzEzTDE3NTcuMTA2LDMzMDkuMDY0TDE3OTUuODc1LDMzNDIuNDc3TDE3OTguOTU2LDMzOTkuNDRMMTc2Mi4yNTIsMzQ0NS4zNzhMMTc0OS4yNjEsMzQ0NS4zODlMMTc1NC4wOTIsMzUxMC4xODFMMTc4OC4wNzIsMzUwNy4xMDJMMTc4OC4wNTIsMzQ4OS42NzNMMTc5My4wODEsMzQ1Ni4xMTNMMTgxNS44MTEsMzQyOS41NDFMMTg0MC40NzEsMzQxMi40NzNMMTgzMy4wOTYsMzM3Ny41MThMMTg0OS40MjMsMzM3NC4wNzNMMTg1NS43NzksMzQwNC4xOTdMMTg2OC44MzgsMzQwMS45NDZMMTg2My45ODYsMzM2MS45NEwxODgwLjU1MiwzMzU5LjkzMUwxODg1LjMwMywzMzk5LjEwOUwxODk4LjIwOCwzMzk2Ljg4NUwxODk2Ljc0NiwzMzUzLjE1N0wxOTEzLjQyNCwzMzUyLjZMMTkxNC44NjgsMzM5NS44MDVMMTkyNy45MTksMzM5Ny41MThMMTkzMC4wMzQsMzM1OC4yNzZMMTk0Ni42OTcsMzM1OS4xNzVMMTk0NC41MTMsMzM5OS42OTZMMTk1Ny4wNDUsMzQwMS4zNDFMMTk1Ny41NjksMzQwMS43NjdMMTk2Mi4wMzgsMzM3MC4zMDhMMTk3OC41NTksMzM3Mi42NTVMMTk3Mi42OCwzNDE0LjAzOUwyMDE5LjI1NCwzNDUxLjg2M0wyMDMyLjE3OCwzNTAwLjA3MkwyMDc0LjkxOSwzNTAwLjEwM0wyMDczLjYzNiwzNDU2Ljg5NkwyMDYwLjAzOCwzNDU2LjQ1M0wyMDI0Ljg4NCwzNDIxLjI5OEwyMDI0LjMyNiwzMzY4LjI4OEwyMDQ4Ljk2NSwzMzM5Ljg5TDIwMzAuNDksMzMxNi43NjhMMjAxNC4xODUsMzMzMi4wOEwxOTQ1LjUxNywzMzMzLjg1N0wxOTA0Ljc0NiwzMjg1LjUzMkwxOTA3LjkyNSwzMjI0LjQxN0wxOTU1Ljk0MiwzMTgwLjIyNUwyMDE3Ljc3LDMxNzkuMDY1TDIwNjMuNDQyLDMyMjYuNjcyTDIwNjIuNzYzLDMyODYuNDU4TDIwNDcuMzk5LDMzMDAuODg3TDIwNzIuODU3LDMzMjkuODU1TDIxMTAuODE3LDMzMjguNjY5TDIxNDYuNTMsMzM2MS41OTJMMjE0Ny42NDYsMzQxNS43MThMMjExMS4zNzUsMzQ1OC4xMjdMMjA5Ny43NTksMzQ1Ny42ODNMMjEwMS4wMTksMzUwMC4xMjJMMjE0NS41MDksMzUwMC4xNTRMMjIzMC4xMjYsMzQ2Mi4xMzhMMjMyNi42NzgsMzM4Ni42OUwyMzI3LjI5NSwzMzg3LjMyMkwyMzMyLjQ5NiwzMzgwLjIzMkwyMzQ0Ljk5LDMzNjIuMTI3TDIzMTcuOTU3LDMzMzcuODU3TDIzMDIuOTQsMzMwMS42TDIzMjMuMjA1LDMyNzguNTYzTDIzNzcuNzc3LDMyOTYuOTgzTDI0MDIuMjA5LDMzMzAuODk4TDI0MzMuMjUyLDMzNDcuMTcyTDI0NDMuMDg4LDMzODYuNzE4TDI0NTMuMTY4LDM0MTkuMjA0TDI0ODAuNjY0LDM0NDkuMzU3TDI0NjUuMTIxLDM0NTkuMjIyTDI0MDMuNzU4LDM0MTMuNDk3TDIzNzUuNTI1LDM0MDguNTIxTDIzNzEuOTU4LDM0MzguNTE0TDIzNzEuMzE0LDM0MzcuNzgzTDIyNTcuNDc5LDM1MTguMjQ1TDIyMTIuMjgsMzUzNS4zMDVDMjIyNS4wMTgsMzU0Mi40OTYgMjIzOC40NjUsMzU1MC4wNiAyMjUxLjMxLDM1NTcuMjMyTDIzNTQuNDc2LDM1MjUuNzI3TDIzNjUuMDU1LDM1MTguNDkzTDIzNTUuNDI3LDM0OTkuNjQzTDIzNTQuODM4LDM0NzYuNzg2TDIzNzAuNjc0LDM0NjguNDk0TDIzOTYuNTAyLDM0ODkuOTE4TDI0MDIuNzAxLDM1MTMuNDY5TDI0MTYuMTgyLDM1MjguODA4TDI0MTMuMjY1LDM1NTIuMzdMMjQxMS45NTcsMzU3Mi4xNDRMMjQyMC42MDgsMzU5NC4yOUwyNDEwLjA5MywzNTk2LjQwNkwyMzg2LjI3OSwzNTU4LjcxM0wyMzcxLjk2NSwzNTUwLjEwNkwyMzY0LjEzMywzNTY3LjM2NEwyMzY5LjYzMSwzNTkxLjk2OEwyMzMzLjU0NCwzNjAxLjEyQzIzNjguNjQ4LDM2MTkuMzY0IDIzOTMuOTk2LDM2MzQuNjQgMjM5NC45MiwzNjQxLjExN0MyMzk2LjI4OCwzNjUwLjcwOSAyMzM2LjM1LDM2ODUuODczIDIyNjYuNjUxLDM3MjIuMjJMMjMwNC43NjQsMzc1OS4yNzNMMjMwNS4xNTQsMzc1OS4xOThMMjMwNS4yODgsMzc1OS43ODNMMjMwNS43OCwzNzYwLjI2MUwyMzA1LjQ2OCwzNzYwLjU3MUwyMzE3LjA5MiwzODExLjQwOEwyMzUyLjA3NCwzODEwLjJMMjM1My4zMTksMzg0MS40NEwyMjQyLjM0NCwzODUyLjk3OEwyMjM5LjMwMywzODE0LjA5M0wyMjc0LjAxMSwzODEyLjg5NUwyMjcwLjUyNCwzNzc4LjU5OEwyMjM2LjU1NywzNzM3LjY4NEMyMTU2LjU0MSwzNzc4LjIyNSAyMDczLjQ0NiwzODE1LjkxIDIwNTkuNzIzLDM4MTYuNDU1QzIwMzIuMDExLDM4MTcuNTU1IDE4MzEuNjcsMzgyMC40NTkgMTgwOC4yMTYsMzgyMi4wMzVDMTc5NS43ODUsMzgyMi44NzEgMTY5MC45NjYsMzc4OS45NTMgMTU5NC43NjcsMzc1NS4xNEwxNTY2LjEwNywzNzk0Ljc3NUwxNTY0LjkxLDM4MjkuNDk1TDE1OTkuODg5LDM4MjguMzY0TDE1OTkuNDQ4LDM4NjcuNjY4TDE0ODcuMDg3LDM4NjMuNTM2TDE0ODYuMjM2LDM4MzIuMDRMMTUyMS40OTEsMzgzMC45TDE1MjkuNzU3LDM3NzkuMDAyTDE1MjkuNDIzLDM3NzguNzExTDE1MjkuODg2LDM3NzguMTk3TDE1MjkuOTgxLDM3NzcuNkwxNTMwLjM3OSwzNzc3LjY0OUwxNTYxLjYxNSwzNzQyLjkzMUMxNDkwLjE1MiwzNzE2LjEyMSAxNDMwLjc4NCwzNjkwLjM5MSAxNDI5LjYxNCwzNjgwLjI4M0MxNDI4LjU5NywzNjcxLjUwMiAxNDU1Ljg3LDM2NTEuODgyIDE0OTEuNTAxLDM2MzAuMjExTDE0NTAuMDE4LDM2MjIuN0wxNDUzLjgwMSwzNTk3Ljc3NUwxNDQ0Ljc5NCwzNTgxLjFMMTQzMS4xMSwzNTkwLjY3N0wxNDA5Ljk2LDM2MjkuOTI3TDEzOTkuMzI0LDM2MjguNTQ0TDE0MDYuNDIyLDM2MDUuODUyTDE0MDMuNzQ5LDM1ODYuMjE2TDEzOTkuMjA5LDM1NjIuOTEyTDE0MTEuNTk2LDM1NDYuNjc3TDE0MTYuMTUsMzUyMi43NTNMMTQ0MC40MzUsMzQ5OS41OTRMMTQ1Ni44MDYsMzUwNi43NzFMMTQ1Ny44MDEsMzUyOS42MTRMMTQ0OS40OTksMzU0OS4wODRMMTQ2MC41NTMsMzU1NS41NjlMMTU3Ni4yMzcsMzU4Mi4zMDdaTTIzMzQuMzg5LDM0MDYuNjM3TDIyNTAuMDg3LDM0NzAuMDg4TDIyNjEuMzE0LDM0OTQuNTk4TDIzNTUuNDM4LDM0MjcuMkwyMzM0LjM4OSwzNDA2LjYzN1pNMTY3Ny40MjEsMzUyNS43NTZMMTYwMy42OTgsMzUwMC40NDVMMTU5NS4xNTUsMzUyNC45MTRMMTY0OS41ODIsMzU0My4xMDRDMTY1Ny45NiwzNTM3Ljk3MyAxNjY4LjY4NSwzNTMxLjI1NyAxNjc3LjQyMSwzNTI1Ljc1NlpNMjEwNi4wMDQsMzM4Ni45NzJMMjA5Ni40NzUsMzM3Mi44NjVMMjA4My40MSwzMzcxLjY3NEwyMDY1Ljk2OCwzMzg1LjAyNUwyMDY5LjEzLDM0MDkuNDQyTDIwODUuMTUyLDM0MTUuMTIyTDIxMDEuMDM2LDM0MDUuNTEzTDIxMDYuMDA0LDMzODYuOTcyWk0yMzExLjgwNywzNTkwLjA1NEwyMzUxLjY2MSwzNTgxLjE5M0wyMzQwLjk4NywzNTQ2LjE2TDIyNzEuNTc2LDM1NjguNDk1QzIyODguMjA0LDM1NzcuNjg0IDIzMDIuMjEzLDM1ODUuMjY5IDIzMDkuOTI2LDM1ODkuMTE1TDIzMTEuODA3LDM1OTAuMDU0Wk0xNTU1LjcwNCwzNTkzLjQzMUwxNDc4LjQ1OSwzNTc4LjA0OEwxNDcwLjQ5NywzNjExLjk3OUwxNTEwLjAzNiwzNjE5LjE3OEMxNTI0Ljg4OCwzNjEwLjUwOCAxNTQwLjUxMiwzNjAxLjc0OCAxNTU1LjcwNCwzNTkzLjQzMVpNMTcwOC4wNSwzMzc4Ljc4NEwxNzE0LjA0OCwzMzk2LjExNkwxNzI3LjMxNywzNDAwLjk4NUwxNzQ5LjE4MiwzMzkxLjkzNkwxNzUyLjY3NiwzMzY1LjY0MUwxNzM3LjU3NywzMzU1LjI3N0wxNzE4LjM3NCwzMzYwLjg2NUwxNzA4LjA1LDMzNzguNzg0Wk0yMTkzLjQyOCwzNTI0LjY0MkwyMjQ0LjQ4NiwzNTA1LjU2OEwyMjMyLjcxNywzNDc4LjM2TDIxNjIuNTYyLDM1MDcuMTA4QzIxNzAuMjU4LDM1MTEuNDkxIDIxODEuMDY3LDM1MTcuNjM4IDIxOTMuNDI4LDM1MjQuNjQyWk0xNDg4LjA0MiwzNDMxLjYzMkwxNDgxLjQ4MSwzNDQ2Ljg3NUwxNDgzLjY4OSwzNDYwLjA1OEwxNTcxLjk3LDM1MTAuMTMxTDE1ODAuOTQzLDM0ODcuNzM3TDE0ODguMDQyLDM0MzEuNjMyWk0xOTkzLjQ1NywzMjgxLjA5NEwyMDEwLjE2MiwzMjY5LjQyM0wyMDExLjMzOSwzMjUzLjc2M0wxOTk1LjAzMSwzMjMzLjEzOUwxOTY1Ljg2NywzMjM3LjM4NUwxOTU5LjM3MiwzMjU2LjY2OUwxOTcxLjE3MiwzMjc1LjQ5OEwxOTkzLjQ1NywzMjgxLjA5NFoiIHN0eWxlPSJzdHJva2U6YmxhY2s7c3Ryb2tlLW9wYWNpdHk6MDtzdHJva2Utd2lkdGg6Mi4wOHB4OyIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
    mask-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDU0NCAzMzAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsLTI3MDYuMTM0MjM3LC0xODEuNTg0ODE2KSI+CiAgICAgICAgPGcgaWQ9Im9kcGFkYTEiIHRyYW5zZm9ybT0ibWF0cml4KDAuNDgxMzgxLDAuMDE2MDk0LC0wLjAxNjA5NCwwLjQ4MTM4MSwyMTEwLjU2NzgxNiwtMTM4MC4yOTIyOSkiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTU3Ni4yMzcsMzU4Mi4zMDdDMTU3OS42NDgsMzU4MC40NzcgMTU4My4wMDYsMzU3OC42ODUgMTU4Ni4yOTQsMzU3Ni45MzdDMTYwMi43NjgsMzU2OC4xODEgMTYxNy40OTYsMzU2MC41NDIgMTYyOC41MjcsMzU1NC44ODFMMTU4Mi4xMDksMzU0MC44MjVMMTQ2Mi43NzQsMzQ2Ny45MTJMMTQ2Mi41MzcsMzQ2OC4yMDlMMTQ1Ni45OTgsMzQzOS4yM0wxNDI5LjE2MSwzNDQ2LjA4TDEzNzAuOTg5LDM0OTUuODAxTDEzNTQuODIyLDM0ODYuOTk3TDEzODAuMjQzLDM0NTUuMDc0TDEzODguMTMsMzQyMS45ODdMMTM5NS4zMDMsMzM4MS44NzNMMTQyNS4xODksMzM2My41NjJMMTQ0Ny4zMDIsMzMyOC4wOTFMMTUwMC41MjIsMzMwNi4wNjdMMTUyMi4yOCwzMzI3LjY5OUwxNTA5LjcxOCwzMzY0Ljg3OEwxNDg0LjM2NywzMzkwLjlMMTQ5OC4wNDIsMzQwOC4xMjlMMTUwNC4xNTcsMzQxNC4zMjdMMTUwNC4yNzksMzQxNC4xODVMMTYwNS42NTQsMzQ4My4wMTVMMTY5My42MDksMzUxNS42NjJMMTcyNy4yNDIsMzUxMi42MTRMMTcyNS4yNDcsMzQ0NS40MDhMMTcwOC4xMywzNDQ1LjQyMkwxNjY5Ljg3LDM0MDkuNjM4TDE2NjcuNDE2LDMzNTMuODMyTDE3MDAuNzUxLDMzMTIuNzEzTDE3NTcuMTA2LDMzMDkuMDY0TDE3OTUuODc1LDMzNDIuNDc3TDE3OTguOTU2LDMzOTkuNDRMMTc2Mi4yNTIsMzQ0NS4zNzhMMTc0OS4yNjEsMzQ0NS4zODlMMTc1NC4wOTIsMzUxMC4xODFMMTc4OC4wNzIsMzUwNy4xMDJMMTc4OC4wNTIsMzQ4OS42NzNMMTc5My4wODEsMzQ1Ni4xMTNMMTgxNS44MTEsMzQyOS41NDFMMTg0MC40NzEsMzQxMi40NzNMMTgzMy4wOTYsMzM3Ny41MThMMTg0OS40MjMsMzM3NC4wNzNMMTg1NS43NzksMzQwNC4xOTdMMTg2OC44MzgsMzQwMS45NDZMMTg2My45ODYsMzM2MS45NEwxODgwLjU1MiwzMzU5LjkzMUwxODg1LjMwMywzMzk5LjEwOUwxODk4LjIwOCwzMzk2Ljg4NUwxODk2Ljc0NiwzMzUzLjE1N0wxOTEzLjQyNCwzMzUyLjZMMTkxNC44NjgsMzM5NS44MDVMMTkyNy45MTksMzM5Ny41MThMMTkzMC4wMzQsMzM1OC4yNzZMMTk0Ni42OTcsMzM1OS4xNzVMMTk0NC41MTMsMzM5OS42OTZMMTk1Ny4wNDUsMzQwMS4zNDFMMTk1Ny41NjksMzQwMS43NjdMMTk2Mi4wMzgsMzM3MC4zMDhMMTk3OC41NTksMzM3Mi42NTVMMTk3Mi42OCwzNDE0LjAzOUwyMDE5LjI1NCwzNDUxLjg2M0wyMDMyLjE3OCwzNTAwLjA3MkwyMDc0LjkxOSwzNTAwLjEwM0wyMDczLjYzNiwzNDU2Ljg5NkwyMDYwLjAzOCwzNDU2LjQ1M0wyMDI0Ljg4NCwzNDIxLjI5OEwyMDI0LjMyNiwzMzY4LjI4OEwyMDQ4Ljk2NSwzMzM5Ljg5TDIwMzAuNDksMzMxNi43NjhMMjAxNC4xODUsMzMzMi4wOEwxOTQ1LjUxNywzMzMzLjg1N0wxOTA0Ljc0NiwzMjg1LjUzMkwxOTA3LjkyNSwzMjI0LjQxN0wxOTU1Ljk0MiwzMTgwLjIyNUwyMDE3Ljc3LDMxNzkuMDY1TDIwNjMuNDQyLDMyMjYuNjcyTDIwNjIuNzYzLDMyODYuNDU4TDIwNDcuMzk5LDMzMDAuODg3TDIwNzIuODU3LDMzMjkuODU1TDIxMTAuODE3LDMzMjguNjY5TDIxNDYuNTMsMzM2MS41OTJMMjE0Ny42NDYsMzQxNS43MThMMjExMS4zNzUsMzQ1OC4xMjdMMjA5Ny43NTksMzQ1Ny42ODNMMjEwMS4wMTksMzUwMC4xMjJMMjE0NS41MDksMzUwMC4xNTRMMjIzMC4xMjYsMzQ2Mi4xMzhMMjMyNi42NzgsMzM4Ni42OUwyMzI3LjI5NSwzMzg3LjMyMkwyMzMyLjQ5NiwzMzgwLjIzMkwyMzQ0Ljk5LDMzNjIuMTI3TDIzMTcuOTU3LDMzMzcuODU3TDIzMDIuOTQsMzMwMS42TDIzMjMuMjA1LDMyNzguNTYzTDIzNzcuNzc3LDMyOTYuOTgzTDI0MDIuMjA5LDMzMzAuODk4TDI0MzMuMjUyLDMzNDcuMTcyTDI0NDMuMDg4LDMzODYuNzE4TDI0NTMuMTY4LDM0MTkuMjA0TDI0ODAuNjY0LDM0NDkuMzU3TDI0NjUuMTIxLDM0NTkuMjIyTDI0MDMuNzU4LDM0MTMuNDk3TDIzNzUuNTI1LDM0MDguNTIxTDIzNzEuOTU4LDM0MzguNTE0TDIzNzEuMzE0LDM0MzcuNzgzTDIyNTcuNDc5LDM1MTguMjQ1TDIyMTIuMjgsMzUzNS4zMDVDMjIyNS4wMTgsMzU0Mi40OTYgMjIzOC40NjUsMzU1MC4wNiAyMjUxLjMxLDM1NTcuMjMyTDIzNTQuNDc2LDM1MjUuNzI3TDIzNjUuMDU1LDM1MTguNDkzTDIzNTUuNDI3LDM0OTkuNjQzTDIzNTQuODM4LDM0NzYuNzg2TDIzNzAuNjc0LDM0NjguNDk0TDIzOTYuNTAyLDM0ODkuOTE4TDI0MDIuNzAxLDM1MTMuNDY5TDI0MTYuMTgyLDM1MjguODA4TDI0MTMuMjY1LDM1NTIuMzdMMjQxMS45NTcsMzU3Mi4xNDRMMjQyMC42MDgsMzU5NC4yOUwyNDEwLjA5MywzNTk2LjQwNkwyMzg2LjI3OSwzNTU4LjcxM0wyMzcxLjk2NSwzNTUwLjEwNkwyMzY0LjEzMywzNTY3LjM2NEwyMzY5LjYzMSwzNTkxLjk2OEwyMzMzLjU0NCwzNjAxLjEyQzIzNjguNjQ4LDM2MTkuMzY0IDIzOTMuOTk2LDM2MzQuNjQgMjM5NC45MiwzNjQxLjExN0MyMzk2LjI4OCwzNjUwLjcwOSAyMzM2LjM1LDM2ODUuODczIDIyNjYuNjUxLDM3MjIuMjJMMjMwNC43NjQsMzc1OS4yNzNMMjMwNS4xNTQsMzc1OS4xOThMMjMwNS4yODgsMzc1OS43ODNMMjMwNS43OCwzNzYwLjI2MUwyMzA1LjQ2OCwzNzYwLjU3MUwyMzE3LjA5MiwzODExLjQwOEwyMzUyLjA3NCwzODEwLjJMMjM1My4zMTksMzg0MS40NEwyMjQyLjM0NCwzODUyLjk3OEwyMjM5LjMwMywzODE0LjA5M0wyMjc0LjAxMSwzODEyLjg5NUwyMjcwLjUyNCwzNzc4LjU5OEwyMjM2LjU1NywzNzM3LjY4NEMyMTU2LjU0MSwzNzc4LjIyNSAyMDczLjQ0NiwzODE1LjkxIDIwNTkuNzIzLDM4MTYuNDU1QzIwMzIuMDExLDM4MTcuNTU1IDE4MzEuNjcsMzgyMC40NTkgMTgwOC4yMTYsMzgyMi4wMzVDMTc5NS43ODUsMzgyMi44NzEgMTY5MC45NjYsMzc4OS45NTMgMTU5NC43NjcsMzc1NS4xNEwxNTY2LjEwNywzNzk0Ljc3NUwxNTY0LjkxLDM4MjkuNDk1TDE1OTkuODg5LDM4MjguMzY0TDE1OTkuNDQ4LDM4NjcuNjY4TDE0ODcuMDg3LDM4NjMuNTM2TDE0ODYuMjM2LDM4MzIuMDRMMTUyMS40OTEsMzgzMC45TDE1MjkuNzU3LDM3NzkuMDAyTDE1MjkuNDIzLDM3NzguNzExTDE1MjkuODg2LDM3NzguMTk3TDE1MjkuOTgxLDM3NzcuNkwxNTMwLjM3OSwzNzc3LjY0OUwxNTYxLjYxNSwzNzQyLjkzMUMxNDkwLjE1MiwzNzE2LjEyMSAxNDMwLjc4NCwzNjkwLjM5MSAxNDI5LjYxNCwzNjgwLjI4M0MxNDI4LjU5NywzNjcxLjUwMiAxNDU1Ljg3LDM2NTEuODgyIDE0OTEuNTAxLDM2MzAuMjExTDE0NTAuMDE4LDM2MjIuN0wxNDUzLjgwMSwzNTk3Ljc3NUwxNDQ0Ljc5NCwzNTgxLjFMMTQzMS4xMSwzNTkwLjY3N0wxNDA5Ljk2LDM2MjkuOTI3TDEzOTkuMzI0LDM2MjguNTQ0TDE0MDYuNDIyLDM2MDUuODUyTDE0MDMuNzQ5LDM1ODYuMjE2TDEzOTkuMjA5LDM1NjIuOTEyTDE0MTEuNTk2LDM1NDYuNjc3TDE0MTYuMTUsMzUyMi43NTNMMTQ0MC40MzUsMzQ5OS41OTRMMTQ1Ni44MDYsMzUwNi43NzFMMTQ1Ny44MDEsMzUyOS42MTRMMTQ0OS40OTksMzU0OS4wODRMMTQ2MC41NTMsMzU1NS41NjlMMTU3Ni4yMzcsMzU4Mi4zMDdaTTIzMzQuMzg5LDM0MDYuNjM3TDIyNTAuMDg3LDM0NzAuMDg4TDIyNjEuMzE0LDM0OTQuNTk4TDIzNTUuNDM4LDM0MjcuMkwyMzM0LjM4OSwzNDA2LjYzN1pNMTY3Ny40MjEsMzUyNS43NTZMMTYwMy42OTgsMzUwMC40NDVMMTU5NS4xNTUsMzUyNC45MTRMMTY0OS41ODIsMzU0My4xMDRDMTY1Ny45NiwzNTM3Ljk3MyAxNjY4LjY4NSwzNTMxLjI1NyAxNjc3LjQyMSwzNTI1Ljc1NlpNMjEwNi4wMDQsMzM4Ni45NzJMMjA5Ni40NzUsMzM3Mi44NjVMMjA4My40MSwzMzcxLjY3NEwyMDY1Ljk2OCwzMzg1LjAyNUwyMDY5LjEzLDM0MDkuNDQyTDIwODUuMTUyLDM0MTUuMTIyTDIxMDEuMDM2LDM0MDUuNTEzTDIxMDYuMDA0LDMzODYuOTcyWk0yMzExLjgwNywzNTkwLjA1NEwyMzUxLjY2MSwzNTgxLjE5M0wyMzQwLjk4NywzNTQ2LjE2TDIyNzEuNTc2LDM1NjguNDk1QzIyODguMjA0LDM1NzcuNjg0IDIzMDIuMjEzLDM1ODUuMjY5IDIzMDkuOTI2LDM1ODkuMTE1TDIzMTEuODA3LDM1OTAuMDU0Wk0xNTU1LjcwNCwzNTkzLjQzMUwxNDc4LjQ1OSwzNTc4LjA0OEwxNDcwLjQ5NywzNjExLjk3OUwxNTEwLjAzNiwzNjE5LjE3OEMxNTI0Ljg4OCwzNjEwLjUwOCAxNTQwLjUxMiwzNjAxLjc0OCAxNTU1LjcwNCwzNTkzLjQzMVpNMTcwOC4wNSwzMzc4Ljc4NEwxNzE0LjA0OCwzMzk2LjExNkwxNzI3LjMxNywzNDAwLjk4NUwxNzQ5LjE4MiwzMzkxLjkzNkwxNzUyLjY3NiwzMzY1LjY0MUwxNzM3LjU3NywzMzU1LjI3N0wxNzE4LjM3NCwzMzYwLjg2NUwxNzA4LjA1LDMzNzguNzg0Wk0yMTkzLjQyOCwzNTI0LjY0MkwyMjQ0LjQ4NiwzNTA1LjU2OEwyMjMyLjcxNywzNDc4LjM2TDIxNjIuNTYyLDM1MDcuMTA4QzIxNzAuMjU4LDM1MTEuNDkxIDIxODEuMDY3LDM1MTcuNjM4IDIxOTMuNDI4LDM1MjQuNjQyWk0xNDg4LjA0MiwzNDMxLjYzMkwxNDgxLjQ4MSwzNDQ2Ljg3NUwxNDgzLjY4OSwzNDYwLjA1OEwxNTcxLjk3LDM1MTAuMTMxTDE1ODAuOTQzLDM0ODcuNzM3TDE0ODguMDQyLDM0MzEuNjMyWk0xOTkzLjQ1NywzMjgxLjA5NEwyMDEwLjE2MiwzMjY5LjQyM0wyMDExLjMzOSwzMjUzLjc2M0wxOTk1LjAzMSwzMjMzLjEzOUwxOTY1Ljg2NywzMjM3LjM4NUwxOTU5LjM3MiwzMjU2LjY2OUwxOTcxLjE3MiwzMjc1LjQ5OEwxOTkzLjQ1NywzMjgxLjA5NFoiIHN0eWxlPSJzdHJva2U6YmxhY2s7c3Ryb2tlLW9wYWNpdHk6MDtzdHJva2Utd2lkdGg6Mi4wOHB4OyIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:top left;
    mask-position:top left;
    -webkit-mask-size:contain;
    mask-size:contain;
    /* Ukryte i schowane za lewą krawędzią, dopóki hero jest w widoku (patrz
       IntersectionObserver w js/main.js) - logo w sekcji hero dublowałoby napis
       SOLAR_SI, więc wjeżdża dopiero, gdy hero znika z ekranu przy scrollu. */
    opacity:0;
    pointer-events:none;
    transform:translateX(-100%);
    transition:transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
  }
  .corner-logo.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed;
    top:clamp(1.25rem,4vw,3rem);
    right:clamp(1.25rem,4vw,3rem);
    z-index:60;
  }

  .nav-toggle{
    position:relative;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;
    width:38px;height:38px;
    background:transparent;
    border:none;
    border-radius:999px;
    cursor:pointer;
    padding:0;
    transition:transform .18s ease;
  }
  .nav-toggle:hover{
    transform:translateY(-2px);
  }
  @media (max-width:820px){
    .nav-toggle{top:8px;}
  }
  .nav-toggle::before{
    /* Obrys jako osobna, cienka pierścieniowa maska - nie da się tego zrobić
       zwykłym border-color, bo backdrop-filter:invert nie działa przez granicę
       elementu. Maska wycina z pełnego kwadratu tylko wąski pierścień przy
       krawędzi, który (jak kreski w środku) odwraca dokładnie to, co jest
       pod nim - więc jest widoczny na każdym tle. */
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:transparent;
    backdrop-filter:invert(1);
    -webkit-backdrop-filter:invert(1);
    /* Miękkie 1px przejście zamiast twardego cięcia transparent->#000 w tym
       samym punkcie - bez tego przeglądarka nie ma czego wygładzić i krawędź
       pierścienia wychodzi poszarpana/rozpikselowana. */
    -webkit-mask-image:radial-gradient(circle closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
    mask-image:radial-gradient(circle closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
  }
  .nav-toggle .bar{
    display:block;width:18px;height:2px;
    /* Sam przycisk nie ma już wypełnienia - to każda kreska z osobna próbkuje
       i odwraca to, co jest dokładnie pod nią (ta sama technika co
       .site-cursor-dot / .corner-logo). Dzięki temu kreski są dosłownie
       czarne nad jasnym tłem (np. białe karty w #media) i jasne nad ciemnym
       tłem reszty strony - bez pośredniego "odwróconego krążka", który
       zniekształcał ten efekt. */
    background:transparent;
    backdrop-filter:invert(1);
    -webkit-backdrop-filter:invert(1);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-links{
    position:absolute;top:100%;right:0;
    margin-top:0.6rem;
    flex-direction:column;
    display:flex;
    gap:0;
    list-style:none;
    padding:0.6rem 0;
    min-width:190px;
    background:rgba(20,15,31,0.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--cream);
    border-radius:20px;
    box-shadow:0 20px 50px rgba(10,6,20,0.5);
    font-family:"Space Mono",monospace;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-links.is-open{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-links a{
    display:block;
    text-decoration:none;color:var(--cream);
    padding:0.7rem 1.2rem;
    border-bottom:1px solid transparent;
    transition:color .2s, background .2s;
  }
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--sun);background:rgba(255,123,62,0.08);}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    isolation:isolate;
    min-height:100svh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;
    overflow:hidden;
    padding:6rem 1.5rem 4rem;
    background:
      radial-gradient(ellipse at 50% 112%, #3a2450 0%, transparent 60%),
      linear-gradient(180deg,#0f0b19 0%, var(--void) 55%, #191033 100%);
  }
  #stars{position:absolute;inset:0;z-index:0;}

  .ufo-particles{position:absolute;inset:0;z-index:9;pointer-events:none;}
  .hero.meteor-playing{cursor:none;touch-action:none;}

  /* position:fixed zamiast samego overflow:hidden - jeśli gracz kliknie "Wznów"/"Graj"
     w trakcie przewijania (np. gestem na trackpadzie), zdarzenia scrolla dolatują jeszcze
     przez chwilę PO tym, jak lockScreen() zrobi window.scrollTo(0,0), więc sam
     overflow:hidden nie chroni przed doskrolowaniem strony poza wierzchołek - blokuje
     scroll, ale nie cofa już zaaplikowanego przesunięcia. position:fixed usuwa body
     z normalnego przepływu przewijania, więc jest odporne na to opóźnienie.*/
  html.meteor-locked{overflow:hidden;}
  body.meteor-locked{
    position:fixed;
    inset:0;
    width:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body.meteor-locked .nav{display:none;}
  body.lightbox-locked{overflow:hidden;overscroll-behavior:none;}
  .site-cursor.hidden-by-game{opacity:0 !important;}
  .ufo-cursor{
    position:absolute;
    top:0;left:0;
    width:clamp(190px,22vw,320px);
    z-index:10000;
    pointer-events:none;
    will-change:transform;
  }
  @media (max-width:820px){
    .ufo-cursor{
      width:clamp(110px,26vw,190px);
    }
  }
  .ufo-img{
    width:100%;
    height:auto;
    display:block;
    overflow:visible; /* odpadające części (patrz .ufo-part) odlatują poza viewBox - domyślnie <svg> je tam przycina */
    filter:
      drop-shadow(0 12px 22px rgba(255,123,62,0.85))
      drop-shadow(0 4px 46px rgba(255,177,77,0.55))
      drop-shadow(0 6px 12px rgba(0,0,0,0.5));
    transition:filter 0.3s ease;
  }
  .ufo-cursor.shielded .ufo-img{
    filter:
      drop-shadow(0 12px 22px rgba(86,167,242,0.9))
      drop-shadow(0 4px 52px rgba(86,167,242,0.7))
      drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  }
  .ufo-cursor.ship-damage-glow .ufo-img{
    filter:
      drop-shadow(0 12px 22px rgba(220,30,40,0.9))
      drop-shadow(0 4px 52px rgba(255,60,60,0.75))
      drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  }
  .ufo-eye{
    fill:var(--sun-warm);
    animation:ufo-eye-blink 1.5s ease-in-out infinite;
  }
  .ufo-eye-1{animation-delay:0s;}
  .ufo-eye-2{animation-delay:0.5s;}
  .ufo-eye-3{animation-delay:1s;}
  @keyframes ufo-eye-blink{
    0%,20%{opacity:1;}
    40%,100%{opacity:0.15;}
  }
  /* Działa (nad kopułą UFO) - JS przełącza .is-active na tylu z nich, ile aktualnie
     ma statek (gunsUnlocked), w kolejności d1 -> d5 (patrz GUN_IDS
     w js/ufo.js). */
  .ufo-gun{
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .ufo-gun.is-active{opacity:1;}
  /* Odpadające części kadłuba - po trafieniu meteorytem JS dokłada .is-detached
     jednej z nich i ustawia jej transform inline (patrz detachShipPart w
     js/ufo.js) - kierunek odlotu zależy od aktualnego kierunku lotu statku
     (przeciwny do niego), więc nie da się go zapisać jako stałej reguły CSS.
     transform-box:fill-box liczy transform-origin względem własnego bboxa
     elementu, więc obrót jest wokół jego środka, nie (0,0) SVG. */
  .ufo-part{
    transform-box:fill-box;
    transform-origin:50% 50%;
    transition:transform 1.1s cubic-bezier(0.33,0.6,0.4,1), opacity 0.9s ease 0.25s;
  }
  .ufo-part.is-detached{opacity:0;}

  .meteor-flash{
    position:absolute;inset:0;z-index:4;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 100%, rgba(252,54,30,0.55) 0%, transparent 65%);
    opacity:0;
  }
  .meteor-flash.show{
    animation:meteor-flash-pulse 0.35s ease-out;
  }
  @keyframes meteor-flash-pulse{
    0%{opacity:0.9;}
    100%{opacity:0;}
  }

  .meteor-hud-bottom{
    position:absolute;
    bottom:clamp(0.4rem, 1.6vh, 1.1rem);
    left:50%;
    z-index:10001;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%, 10px) scale(0);
    transform-origin:center bottom;
    transition:opacity 0.3s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1);
  }
  .meteor-hud-bottom.active{
    opacity:1;
    transform:translate(-50%, 0) scale(1);
  }
  .meteor-hud-lives{
    display:flex;
    align-items:center;
    gap:0.4rem;
    filter:drop-shadow(0 6px 16px rgba(220,30,40,0.55)) drop-shadow(0 2px 8px rgba(0,0,0,0.65));
  }
  .meteor-life-icon{
    width:clamp(1.6rem, 4vw, 2.4rem);
    height:auto;
    transition:opacity 0.3s ease;
  }

  .meteor-heading-stat{
    position:absolute;
    left:50%;
    z-index:9998;
    width:100%;
    margin:0;
    font-family:"Space Mono",monospace;
    font-size:clamp(1.05rem, 2.6vw, 1.5rem);
    letter-spacing:0.04em;
    color:var(--cream);
    text-align:center;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    text-shadow:0 2px 14px rgba(10,6,20,0.9), 0 1px 6px rgba(10,6,20,0.9);
    transition:opacity 0.35s ease;
  }
  .meteor-heading-stat.active{
    opacity:1;
  }
  .meteor-heading-stat-top{
    transform:translate(-50%, -100%);
  }

  .game-touch-controls{
    display:none;
  }
  @media (pointer:coarse){
    .hero.meteor-playing .game-touch-controls{
      display:block;
    }
  }
  .game-joystick{
    position:fixed;
    right:max(2rem, env(safe-area-inset-right));
    bottom:max(4.5rem, calc(env(safe-area-inset-bottom) + 3rem));
    width:118px;height:118px;
    z-index:10001;
    touch-action:none;
    -webkit-tap-highlight-color:transparent;
  }
  .game-joystick-base{
    position:absolute;inset:0;
    border-radius:50%;
    background:rgba(20,15,31,0.5);
    border:2px solid var(--line-strong);
    backdrop-filter:blur(6px);
  }
  .game-joystick-stick{
    position:absolute;
    left:50%;top:50%;
    width:50px;height:50px;
    margin:-25px 0 0 -25px;
    border-radius:50%;
    background:rgba(255,255,255,0.32);
    border:2px solid rgba(255,255,255,0.6);
    box-shadow:0 4px 16px rgba(255,255,255,0.2);
    transform:translate(0,0);
  }
  .game-fire-btn{
    position:fixed;
    left:max(2rem, env(safe-area-inset-left));
    /* Środek pokrywa się ze środkiem joysticka (118px) - przycisk jest mniejszy (82px),
       więc dosuwamy go o połowę różnicy wysokości, żeby oba były na tej samej wysokości. */
    bottom:calc(max(4.5rem, calc(env(safe-area-inset-bottom) + 3rem)) + 18px);
    width:82px;height:82px;
    border-radius:50%;
    z-index:10001;
    background:rgba(255,255,255,0.32);
    border:2px solid rgba(255,255,255,0.6);
    box-shadow:0 6px 20px rgba(255,255,255,0.2);
    padding:0;
    touch-action:none;
    -webkit-tap-highlight-color:transparent;
    transition:transform 0.12s ease;
  }
  .game-fire-btn::before{
    content:'';
    position:absolute;
    inset:22px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
  }
  .game-fire-btn.is-pressed{
    transform:scale(0.9);
  }
  .game-fire-btn.is-disarmed{
    opacity:0.35;
  }

  .meteor-gameover{
    position:absolute;inset:0;z-index:10002;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:1.5rem 0;
    overflow-y:auto;
    pointer-events:none;
  }
  .meteor-gameover.active{
    display:flex;
    pointer-events:auto;
  }
  .meteor-gameover-title{
    flex:none;
    font-family:"Unbounded",sans-serif;font-weight:800;
    font-size:clamp(2rem, 5vw, 3.2rem);
    color:var(--cream);
    margin:0;
    text-align:center;
    text-shadow:0 4px 28px rgba(10,6,20,0.9), 0 2px 10px rgba(10,6,20,0.9);
  }
  .meteor-gameover-body{
    flex:none;
    display:flex;flex-direction:column;align-items:center;gap:0.4rem;
    width:min(92vw, 420px);
    padding:1.5rem clamp(1.2rem,5vw,2rem) 1.8rem;
    background:rgba(20,15,31,0.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line-strong);
    border-radius:20px;
    box-shadow:0 20px 50px rgba(10,6,20,0.5);
    pointer-events:none;
  }
  .meteor-gameover.active .meteor-gameover-body{
    pointer-events:auto;
  }
  .meteor-gameover-stats{
    font-family:"Space Mono",monospace;
    font-size:clamp(0.95rem, 1.6vw, 1.15rem);
    color:var(--cream);
    text-align:center;
    margin:0 0 1.4rem;
    line-height:1.9;
    text-shadow:0 2px 14px rgba(10,6,20,0.9), 0 1px 6px rgba(10,6,20,0.9);
  }
  .meteor-gameover-stats p{
    margin:0 0 0.9rem;
  }
  .meteor-stats-table{
    width:100%;
    max-width:360px;
    margin:0 auto;
    border-collapse:collapse;
  }
  .meteor-stats-table th{
    font-size:0.72em;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cosmic);
    font-weight:700;
    text-align:center;
    padding:0 0.4rem 0.5rem;
    border-bottom:1px solid var(--line-strong);
  }
  .meteor-stats-table th.stat-th-obj{
    text-align:left;
  }
  .meteor-stats-table td{
    padding:0.4rem;
    text-align:center;
    border-bottom:1px solid var(--line);
  }
  .meteor-stats-table td.stat-td-obj{
    text-align:left;
    white-space:nowrap;
  }
  .meteor-stats-table td.stat-na{
    color:var(--muted-dim);
  }
  .meteor-stats-table td.stat-td-shipdmg{
    padding-top:0.8rem;
    border-bottom:none;
    border-top:1px solid var(--line-strong);
    font-weight:700;
    text-align:left; /* dziedziczyłby text-align:center z .meteor-gameover-stats - ikona UFO
                         wypadałaby na środku zamiast w tej samej kolumnie co ikony wyżej */
  }
  .meteor-stat-icon{
    width:1.3em;
    height:1.3em;
    display:inline-block;
    vertical-align:middle;
    margin-right:0.5em;
    filter:drop-shadow(0 2px 6px rgba(10,6,20,0.7));
  }
  /* svg/ufo-mini.svg nie ma wpisanego fill (domyślnie czarny) - na ciemnym tle byłby
     niewidoczny, więc odwracamy go do bieli, tak jak resztę tekstu w tym panelu. */
  .meteor-stat-icon-ship{
    filter:invert(1) drop-shadow(0 2px 6px rgba(10,6,20,0.7));
  }
  .meteor-gameover-actions{
    display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;
  }
  .meteor-btn{
    font-family:"Manrope",system-ui,sans-serif;
    font-weight:700;
    font-size:0.9rem;
    padding:0.75rem 1.5rem;
    border-radius:999px;
    border:1px solid var(--line-strong);
    cursor:pointer;
    background:transparent;
    color:var(--cream);
    transition:transform 0.15s ease, background 0.15s ease;
  }
  .meteor-btn:hover{
    transform:translateY(-2px);
  }
  .meteor-btn-again{
    background:var(--cosmic);
    color:#0a1a2e;
    border-color:transparent;
  }
  .meteor-btn-again:hover{
    background:#7cc0f7;
  }
  .meteor-btn-exit:hover{
    background:rgba(255,255,255,0.08);
  }
  .meteor-pause{
    position:absolute;inset:0;z-index:10002;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:1.5rem 0;
    overflow-y:auto;
    pointer-events:none;
  }
  .meteor-pause.active{
    display:flex;
    pointer-events:auto;
  }
  /* Tytuł jest teraz dopięty nad panelem (position:absolute względem .meteor-pause-body,
     poza jego flow), zamiast być razem z nim elementem wyśrodkowywanej kolumny - inaczej
     środek CAŁEJ grupy (tytuł + odstęp + panel) wypadał na środku ekranu, a sam panel
     (to, o co pytał użytkownik - "nie licząc nagłówka") był przesunięty w dół. */
  .meteor-pause-title{
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    margin:0 0 1rem;
    width:max-content;
    font-family:"Unbounded",sans-serif;font-weight:800;
    font-size:clamp(2rem, 5vw, 3.2rem);
    color:var(--cream);
    text-align:center;
    text-shadow:0 4px 28px rgba(10,6,20,0.9), 0 2px 10px rgba(10,6,20,0.9);
  }
  .meteor-pause-body{
    position:relative; /* punkt odniesienia dla .meteor-pause-title powyżej */
    flex:none;
    display:flex;flex-direction:column;align-items:center;gap:0.4rem;
    width:min(92vw, 420px);
    padding:1.5rem clamp(1.2rem,5vw,2rem) 1.8rem;
    background:rgba(20,15,31,0.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line-strong);
    border-radius:20px;
    box-shadow:0 20px 50px rgba(10,6,20,0.5);
    pointer-events:none;
  }
  .meteor-pause.active .meteor-pause-body{
    pointer-events:auto;
  }
  /* Grid zamiast flex-wrap: "Wyjdź" (grid-column:1/-1, patrz .meteor-btn-full) w ten
     sposób naturalnie rozciąga się na dokładną łączną szerokość górnego rzędu (kolumny
     wyznacza szerokość Wznów/Zagraj od nowa) - flex-wrap dawał mu tylko szerokość
     własnego tekstu, nie całego rzędu nad nim. */
  .meteor-pause-actions{
    display:grid;
    grid-template-columns:auto auto;
    gap:0.8rem;
    justify-content:center;
  }
  .meteor-btn-full{
    grid-column:1 / -1;
    width:100%;
  }

  .hero-sun{
    position:absolute;
    inset:0;
    z-index:1;
  }
  .sun-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    background:transparent;
  }

  .hero-content{
    width:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.75rem;
  }
  .play-btn{
    /* position:relative (nie absolute) - jest teraz zwykłym elementem flow w kolumnie
       .hero-content (pod H1), position:relative jest tylko po to, żeby z-index
       zadziałał (musi zostać nad .ufo-cursor, patrz niżej). */
    position:relative;
    z-index:10500; /* nad .ufo-cursor (z-index:10000) - inaczej UFO go zasłaniało */
    font-family:"Space Mono",monospace;
    font-size:0.85rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:0.95rem 2.6rem;
    border-radius:999px;
    border:1px solid #fff;
    background:transparent;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .18s ease, background .18s ease;
  }
  .play-btn:hover{
    background:rgba(255,255,255,0.12);
    transform:translateY(-2px);
  }
  /* visibility, nie display:none - .hero-content jest flex-column i centruje się
     jako grupa (h1 + przycisk + podpowiedź scrollowania). display:none usuwałby
     przycisk z layoutu, więc grupa traciłaby wysokość i cały napis SOLAR_SI
     przeskakiwał w inne miejsce dokładnie w momencie startu/końca gry. */
  .play-btn.hidden{
    visibility:hidden;
    pointer-events:none;
  }
  .scroll-hint{
    /* z-index bez position - element flex może go użyć wprost. Musi być nad
       .ufo-cursor (z-index:10000), inaczej UFO by go zasłaniało w hero. Kolor jest
       pełną, nieprzezroczystą bielą (bez mix-blend-mode) - kontrast z jasnym słońcem
       w tle daje mocny text-shadow, ta sama technika co np. .meteor-heading-stat. */
    z-index:10600;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    color:#fff;
    text-decoration:none;
    font-family:"Space Mono",monospace;
    font-size:0.78rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    text-align:center;
    text-shadow:0 2px 14px rgba(10,6,20,0.9), 0 1px 6px rgba(10,6,20,0.9);
    transition:color 0.2s ease;
  }
  .scroll-hint:hover{color:var(--cosmic);}
  .scroll-hint-arrow{
    width:14px;height:14px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    filter:drop-shadow(0 2px 6px rgba(10,6,20,0.9));
  }
  /* visibility, nie display:none - patrz identyczne uzasadnienie przy .play-btn.hidden
     wyżej: usunięcie z layoutu zmieniałoby wysokość wyśrodkowanej grupy .hero-content
     i przesuwało napis SOLAR_SI dokładnie w momencie startu/końca gry.
     Podczas gry statek lata dokładnie w tym obszarze pod napisem, a wskazówka
     nie prowadzi już do żadnej użytecznej akcji w tym trybie. */
  .hero.meteor-playing .scroll-hint{
    visibility:hidden;
    pointer-events:none;
  }
  /* Ekran "Koniec gry" i pauza usuwają klasę .meteor-playing z .hero (patrz ufo.js),
     więc powyższa reguła ich nie obejmuje - a wysoki z-index podpowiedzi (10600, musi
     być nad .ufo-cursor) sprawiał, że prześwitywała nad panelami tych ekranów. */
  .hero:has(.meteor-gameover.active) .scroll-hint,
  .hero:has(.meteor-pause.active) .scroll-hint{
    visibility:hidden;
    pointer-events:none;
  }
  .hero h1{
    position:relative;
    z-index:2;
    width:100%;
    font-size:clamp(2.75rem, calc(15vw - 0.3rem), 12.8rem);
    font-weight:900;
    line-height:0.95;
    letter-spacing:-0.01em;
    color:#fff;
    mix-blend-mode:difference;
    user-select:none;
    -webkit-user-select:none;
  }
  .hero h1 .cursor{
    animation:cursor-blink 1s steps(1,end) infinite;
  }
  @keyframes cursor-blink{
    0%,49%{opacity:1;}
    50%,100%{opacity:0;}
  }
  .btn{
    font-family:"Space Mono",monospace;
    font-size:0.85rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    padding:0.95rem 1.9rem;
    border-radius:999px;
    border:1px solid transparent;
    display:inline-block;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--sun);color:#1a0e08;font-weight:700;}
  .btn-primary:hover{background:var(--sun-warm);}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---------- about show section ---------- */
  .about-show-section{background:var(--void);padding-bottom:clamp(1.5rem,3vw,2.5rem);}
  .show-meta{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;}
  .show-meta-item{
    display:flex;flex-direction:column;gap:0.5rem;
    font-family:"Unbounded",sans-serif;font-weight:800;
    font-size:clamp(1.3rem,2.6vw,1.7rem);
    color:var(--cream);
  }
  .show-meta-key{
    font-family:"Space Mono",monospace;font-size:0.78rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--muted-dim);
  }

  /* ---------- map section ---------- */
  .map-section{background:#191129;padding-top:clamp(1.5rem,3vw,2.5rem);}
  .map-grid{
    display:flex;
    flex-direction:column;
    gap:clamp(1.5rem,3vw,2.5rem);
  }
  .map-wrap{
    --grid-n:30;
    --top-cells:3;
    --bottom-cells:1;
    --side-cells:1;
    --radar-gap-cells:0;
    --alert-gap-cells:0;
    --warn-size:34px;
    --map-ratio:1.0613;
    --ideal-ratio: calc(
      (var(--map-ratio) * (1 - (var(--top-cells) + var(--bottom-cells)) / var(--grid-n)))
      /
      (1 - (2 * var(--side-cells) / var(--grid-n)))
    );
    /* round the row count UP so the grid always ends on a full square cell
       (a taller container with one extra row beats a cut-off last row);
       --radar-gap-cells adds pure extra rows below the map stage (doesn't
       affect the map's own fit) to make room for the radar on narrow screens */
    --rows: calc(round(up, calc(var(--grid-n) / var(--ideal-ratio)), 1) + var(--radar-gap-cells) + var(--alert-gap-cells));
    --wrap-ratio: calc(var(--grid-n) / var(--rows));
    --cell:calc(100% / var(--grid-n));
    --cell-y:calc(100% / var(--rows));
    aspect-ratio: var(--wrap-ratio);
    background:
      repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--cell)),
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--cell-y)),
      var(--void-soft);
    border:1px solid var(--line);
    border-radius:6px;
    position:relative;
  }
  @media (max-width:560px){
    .map-wrap{--grid-n:10;--top-cells:3;--radar-gap-cells:3;--alert-gap-cells:1;}
  }
  @media (min-width:561px) and (max-width:1100px){
    .map-wrap{--top-cells:4;}
  }
  @media (max-width:1100px){
    .map-wrap{--warn-size:calc(var(--cell) * 2);}
  }
  .map-stage{
    position:absolute;
    top:calc(var(--cell-y) * (var(--top-cells) + var(--alert-gap-cells)));
    left:calc(var(--cell) * var(--side-cells));
    right:calc(var(--cell) * var(--side-cells));
    bottom:calc(var(--cell-y) * (var(--bottom-cells) + var(--radar-gap-cells)));
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .map-stage svg{width:100%;height:100%;object-fit:contain;display:block;}

  .warn-light{
    position:absolute;
    top:var(--cell-y);
    right:var(--cell);
    z-index:3;
    width:var(--warn-size);height:var(--warn-size);
    display:flex;align-items:center;justify-content:center;
    color:var(--alarm);
    background:rgba(252,152,30,0.12);
    border:1px solid var(--alarm);
    border-radius:4px;
    pointer-events:none;
    animation:warn-blink 1s steps(1,end) infinite;
  }
  .warn-icon{width:18px;height:18px;flex:none;}
  @media (max-width:1100px){
    .warn-light{height:calc(var(--cell-y) * 2);}
  }
  @keyframes warn-blink{
    0%,49%{opacity:1;box-shadow:0 0 12px 2px rgba(252,152,30,0.55);}
    50%,100%{opacity:0.25;box-shadow:0 0 0 0 rgba(252,152,30,0);}
  }

  .radar-widget{
    z-index:3;
    pointer-events:none;
  }
  .radar-face{
    position:absolute;
    left:var(--cell);
    bottom:var(--cell-y);
    z-index:3;
    width:calc(var(--cell) * 4);height:calc(var(--cell-y) * 4);
    border-radius:50%;
    background:
      radial-gradient(circle, rgba(86,167,242,0.1) 0%, transparent 72%),
      var(--void);
    border:1px solid var(--line-strong);
    box-shadow:0 8px 22px rgba(0,0,0,0.4);
    overflow:hidden;
  }
  @media (max-width:560px){
    .radar-face{
      width:calc(var(--cell) * 3);height:calc(var(--cell-y) * 3);
    }
  }
  .radar-rings{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:var(--line-strong);
    stroke-width:1;
  }
  .radar-sweep{
    position:absolute;inset:0;
    border-radius:50%;
    background:conic-gradient(from 0deg, rgba(86,167,242,0.55) 0deg, rgba(86,167,242,0.18) 26deg, transparent 60deg, transparent 360deg);
    animation:radar-spin 3.2s linear infinite;
  }
  @keyframes radar-spin{to{transform:rotate(360deg);}}
  .radar-blip{
    position:absolute;
    width:7px;height:7px;
    left:71%;top:27%;
    border-radius:50%;
    background:var(--alarm);
    box-shadow:0 0 8px 2px rgba(252,152,30,0.7);
    animation:radar-blip 2s ease-in-out infinite;
    transition:left 0.9s linear, top 0.9s linear;
  }
  .radar-blip--cruise{
    background:var(--cosmic);
    box-shadow:0 0 8px 2px rgba(86,167,242,0.6);
  }
  .radar-center{
    position:absolute;
    width:6px;height:6px;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--cosmic);
    box-shadow:0 0 6px 1px rgba(86,167,242,0.7);
  }
  @keyframes radar-blip{
    0%,100%{opacity:1;}
    50%{opacity:0.35;}
  }
  .radar-info{
    position:absolute;
    left:calc(var(--cell) * 6);
    bottom:var(--cell-y);
    z-index:3;
    font-family:"Space Mono",monospace;
    display:flex;
    flex-direction:column;
    gap:0.3rem;
  }
  .radar-info-label{
    font-size:0.62rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted-dim);
  }
  .radar-info-target{
    font-size:0.95rem;
    font-weight:700;
    color:var(--alarm);
    letter-spacing:0.04em;
  }
  .radar-info-countdown{
    font-size:0.82rem;
    color:var(--cream);
    font-variant-numeric:tabular-nums;
    letter-spacing:0.03em;
  }
  @media (min-width:1101px){
    .radar-info-label{font-size:0.78rem;}
    .radar-info-target{font-size:1.2rem;}
    .radar-info-countdown{font-size:1.05rem;}
  }
  @media (max-width:560px){
    .radar-info{left:calc(var(--cell) * 5);}
  }
  .voivodeship{
    fill:#453869;
    stroke:var(--line-strong);
    stroke-width:1.2;
    stroke-linejoin:round;
  }
  .voivodeship.has-stop{fill:#574a82;}
  .grid-line{stroke:var(--line);stroke-width:1;}
  .stop-label,
  .stop-date,
  .flight-label,
  .landing-label{
    paint-order:stroke;
    stroke:var(--void);
    stroke-width:3px;
    stroke-linejoin:round;
  }
  .stop-label{
    font-family:"Space Mono",monospace;
    font-size:14px;
    fill:var(--muted);
    letter-spacing:0.02em;
  }
  .stop-date{
    font-family:"Space Mono",monospace;
    font-size:12px;
    fill:var(--muted-dim);
  }
  .stop-label-landing{
    font-size:18px;
    font-weight:700;
    fill:var(--alarm);
  }
  .stop-date-landing{
    font-size:13px;
    fill:var(--alarm);
  }
  .stop-label-start{
    font-size:18px;
    font-weight:700;
    fill:var(--cream);
  }
  .stop-date-start{
    font-size:13px;
    fill:var(--cream);
  }
  .stop-dot{stroke:var(--void);stroke-width:2;}
  .dot-visited{fill:var(--cosmic);}
  .dot-next{fill:var(--alarm);}
  .dot-upcoming{fill:none;stroke:var(--muted-dim);stroke-width:2;}
  .pulse{animation:pulse-ring 2.4s ease-out infinite;}
  @keyframes pulse-ring{
    0%{opacity:0.55;r:8;}
    70%{opacity:0;r:21;}
    100%{opacity:0;r:21;}
  }

  .flight-arc{
    fill:none;
    stroke:var(--cosmic);
    stroke-width:2.6;
    stroke-dasharray:7 7;
    opacity:0.7;
  }
  .landing-line{
    fill:none;
    stroke:var(--alarm);
    stroke-width:2.8;
    stroke-dasharray:5 5;
  }
  .landing-label{
    font-family:"Space Mono",monospace;
    font-size:12px;
    letter-spacing:0.04em;
    fill:var(--alarm);
  }
  .flight-label{
    font-family:"Space Mono",monospace;
    font-size:13px;
    letter-spacing:0.08em;
    fill:var(--cosmic);
  }
  .flight-arc{animation:dash-travel 3.5s linear infinite;}
  .landing-line{animation:dash-travel-fast 1.4s linear infinite;}
  @keyframes dash-travel{to{stroke-dashoffset:-28;}}
  @keyframes dash-travel-fast{to{stroke-dashoffset:-20;}}

  @media (max-width:560px){
    .stop-label{font-size:24px;}
    .stop-date{font-size:20px;}
    .stop-label-landing,
    .stop-label-start{font-size:31px;}
    .stop-date-landing,
    .stop-date-start{font-size:21px;}
    .landing-label{font-size:24px;}
    .flight-label{font-size:25px;}
    .stop-label,
    .stop-label-landing,
    .stop-label-start{transform:translateX(12px);}
    .stop-date,
    .stop-date-landing,
    .stop-date-start{transform:translate(12px,13px);}
    .flight-label{transform:translateY(-10px);}
    .landing-label{transform:translate(-10px,8px);}
    .flight-arc{stroke-width:3.8;}
    .landing-line{stroke-width:4;}
    .stop-dot{stroke-width:2.6;}
    use[href="#hex-mark"]{
      transform:scale(2.4);
      transform-box:fill-box;
      transform-origin:center;
    }
    .pulse,
    .dot-next{
      transform:scale(2.6);
      transform-box:fill-box;
      transform-origin:center;
    }
    .ship-icon,
    .ship-pulse{
      transform:scale(2.8);
      transform-origin:0 0;
    }
  }

  @media (min-width:561px) and (max-width:1100px){
    .stop-label{font-size:18px;}
    .stop-date{font-size:15px;}
    .stop-label-landing,
    .stop-label-start{font-size:24px;}
    .stop-date-landing,
    .stop-date-start{font-size:16px;}
    .landing-label{font-size:15px;}
    .flight-label{font-size:16px;}
    use[href="#hex-mark"]{
      transform:scale(1.6);
      transform-box:fill-box;
      transform-origin:center;
    }
    .pulse,
    .dot-next{
      transform:scale(1.7);
      transform-box:fill-box;
      transform-origin:center;
    }
    .ship-icon,
    .ship-pulse{
      transform:scale(1.8);
      transform-origin:0 0;
    }
  }

  .ship-marker{pointer-events:none;}
  .ship-pulse{
    fill:var(--cosmic);
    opacity:0.5;
    animation:ship-pulse-ring 2.4s ease-out infinite;
  }
  .ship-icon{
    filter:drop-shadow(0 0 4px rgba(86,167,242,0.8));
  }
  #ufo-mini{
    overflow:visible;
  }
  #ufo-mini path{
    stroke:var(--void);
    stroke-width:70;
    paint-order:stroke;
  }
  @keyframes ship-pulse-ring{
    0%{opacity:0.5;r:6;}
    70%{opacity:0;r:18;}
    100%{opacity:0;r:18;}
  }

  .system-alert{
    position:absolute;
    top:var(--cell-y);
    left:var(--cell);
    width:calc(100% - var(--cell) * 3 - var(--warn-size));
    z-index:3;
    display:inline-flex;align-items:center;gap:0.7rem;
    box-sizing:border-box;
    height:var(--cell-y);
    font-family:"Space Mono",monospace;
    font-size:0.78rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--alarm);
    background:rgba(252,152,30,0.12);
    border:1px solid var(--alarm);
    border-radius:4px;
    padding:0 1.1rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 0 12px 2px rgba(252,152,30,0.55);
  }
  @media (max-width:560px){
    .system-alert{
      height:auto;
      min-height:calc(var(--cell-y) * 2);
      overflow:visible;
      padding:0 0.6rem 0 1.1rem;
      white-space:normal;
      text-overflow:clip;
    }
  }
  @media (min-width:561px) and (max-width:1100px){
    .system-alert{
      height:calc(var(--cell-y) * 2);
    }
  }
  .stop-next{
    background:rgba(252,152,30,0.08);
  }

  .stop-list{
    list-style:none;margin:0;padding:0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  @media (min-width:820px){
    .stop-list{grid-template-columns:repeat(4,1fr);}
  }
  .stop-list li{
    display:flex;flex-direction:column;gap:0.6rem;
    padding:1.3rem 1.5rem;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stop-city{font-family:"Unbounded",sans-serif;font-weight:700;font-size:1.05rem;}
  .stop-meta{
    display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem;
    font-family:"Space Mono",monospace;font-size:0.78rem;color:var(--muted-dim);
  }
  .badge{
    font-family:"Space Mono",monospace;
    font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;
    padding:0.3rem 0.6rem;border-radius:2px;
    white-space:normal;
    line-height:1.4;
  }
  .badge-visited{color:var(--cosmic);border:1px solid rgba(86,167,242,0.4);}
  .badge-next{color:var(--alarm);border:1px solid rgba(252,152,30,0.5);background:rgba(252,152,30,0.1);}
  .badge-upcoming{color:var(--muted-dim);border:1px solid var(--line-strong);}
  .stop-visited-tag{
    display:inline-block;
    font-family:"Space Mono",monospace;
    font-size:0.64rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    line-height:1.4;
    color:var(--muted-dim);
    border:1px solid var(--line-strong);
    background:rgba(246,236,217,0.06);
    border-radius:2px;
    padding:0.3rem 0.6rem;
  }
  /* Daty w Space Mono (o stałej szerokości znaku) + zawsze dwucyfrowy dzień/miesiąc
     (patrz HTML) - dzięki temu każda data ma tę samą długość w znakach, więc mimo
     wyrównania do prawej wszystkie zaczynają się od tej samej linii.
     Nazwa "stop-meta-date" (nie "stop-date") celowo - .stop-date jest już zajęte
     przez etykiety dat na mapie SVG (patrz ~linia 1077) i ma tam m.in.
     transform:translate(12px,13px) na mobile, który przypadkiem łapał też ten
     element, gdy nosił tę samą klasę. */
  .stop-meta-date{display:inline-block;}
  .stop-date-white{color:var(--cream);}
  .stop-flying-tag{
    display:inline-block;
    font-family:"Space Mono",monospace;
    font-size:0.64rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    line-height:1.4;
    font-weight:700;
    color:var(--cream);
    border:1px solid var(--cream);
    background:rgba(246,236,217,0.06);
    border-radius:2px;
    padding:0.3rem 0.6rem;
  }

  /* Starsze miejsca - te same "duże" kart-bloczki co .stop-list (klasę ma
     wspólną), tylko doklejone niżej. Domyślnie widoczne są maks. 3 - reszta
     odsłania się po kliknięciu .stop-older-toggle (patrz js/main.js). */
  .stop-list-older{
    /* .map-grid to flex column z gap:clamp(1.5rem,3vw,2.5rem) między wszystkimi
       dziećmi - ujemny margines znosi ten odstęp tylko tutaj, żeby lista
       stykała się z bloczkami .stop-list nad nią. */
    margin-top:calc(-1 * clamp(1.5rem,3vw,2.5rem));
    grid-template-columns:1fr;
    border-top:none;
  }
  .stop-list-older li{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
  }
  .stop-list-older .stop-meta{
    flex-direction:row;
    align-items:baseline;
    gap:0.6rem;
    text-align:right;
  }
  .stop-list-older li:nth-child(n+4){display:none;}
  .stop-list-older.is-expanded li:nth-child(n+4){display:flex;}
  @media (max-width:480px){
    /* Grid zamiast flex - align-items:start jednoznacznie trzyma datę przy
       górnej krawędzi wiersza (bez baseline'owych niespodzianek przy różnych
       czcionkach), nawet gdy nazwa zawija się do dwóch linii. */
    .stop-list-older li{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:start;
      column-gap:0.6rem;
    }
    .stop-list-older .stop-meta{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0.4rem;
      text-align:right;
    }
    .stop-list-older .stop-meta-date{
      font-size:0.68rem;
      margin-bottom:0.3rem;
    }
  }
  .stop-older-toggle{
    display:flex;align-items:center;gap:0.5rem;
    margin-top:1.2rem;
    background:none;border:none;padding:0;
    font-family:"Space Mono",monospace;font-size:0.78rem;letter-spacing:0.04em;
    color:var(--muted-dim);
    cursor:pointer;
  }
  .stop-older-toggle:hover{color:var(--cream);}
  .stop-older-toggle-arrow{
    width:8px;height:8px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    transition:transform 0.25s ease;
  }
  .stop-older-toggle.is-expanded .stop-older-toggle-arrow{transform:rotate(-135deg);}

  /* ---------- gallery ---------- */
  .gallery-section{background:var(--void);}
  /* Bento: wszystkie kafle mają tę samą wysokość - 2 rzędy - różni je tylko
     szerokość (2 kolumny dla big/wide/sm, pełne 4 dla banera). Jeden rząd
     wysokości (jak było wcześniej) przy szerokości 2 kolumn wygląda na
     spłaszczony, więc każdy typ kafla dostaje grid-row:span 2. */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:clamp(170px,22vw,280px);
    gap:1rem;
  }
  .gallery-item{
    display:block;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    position:relative;
    background:var(--void-soft);
    -webkit-appearance:none;
    appearance:none;
  }
  .gallery-item--big{grid-column:span 2;grid-row:span 2;}
  .gallery-item--wide{grid-column:span 2;grid-row:span 2;}
  .gallery-item--sm{grid-column:span 2;grid-row:span 2;}
  .gallery-item--banner{grid-column:span 4;grid-row:span 2;}
  /* Ten sam breakout co .alien-grid - galeria szerzej niż .container na dużych
     ekranach, nagłówek sekcji zostaje w normalnej szerokości. */
  @media (min-width:1300px){
    .gallery-grid{
      width:90vw;
      max-width:1600px;
      margin-left:50%;
      margin-top:2rem;
      transform:translateX(-50%);
    }
  }
  @media (max-width:820px){
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-item--sm{grid-column:span 1;}
    .gallery-item--banner{grid-column:span 2;}
  }
  @media (max-width:560px){
    .gallery-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
    .gallery-item--big,.gallery-item--wide,.gallery-item--sm,.gallery-item--banner{grid-column:span 1;grid-row:span 1;}
    .gallery-item{height:auto;aspect-ratio:4/3;}
  }
  .gallery-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
  }
  .gallery-item::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 55%, rgba(20,15,31,0.6) 100%);
    opacity:0;
    transition:opacity .25s ease;
  }
  .gallery-item:hover img{transform:scale(1.06);}
  .gallery-item:hover::after{opacity:1;}
  .gallery-item[data-credit]::before{
    content:attr(data-credit);
    position:absolute;
    left:0.7rem;bottom:0.55rem;
    z-index:1;
    font-family:"Space Mono",monospace;
    font-size:0.66rem;
    letter-spacing:0.02em;
    color:var(--cream);
    text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
    pointer-events:none;
  }

  .lightbox{
    position:fixed;inset:0;
    z-index:10050;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(1.5rem,6vw,4rem);
    background:rgba(10,6,20,0.92);
    opacity:0;visibility:hidden;
    transition:opacity .25s ease, visibility .25s;
  }
  .lightbox.is-open{opacity:1;visibility:visible;}
  /* .lightbox-stage hugs the rendered size of the image (inline-block shrink-to-fit)
     zamiast dziedziczyć wymiary .lightbox - dzięki temu podpis pozycjonowany względem
     niej trafia dokładnie w róg zdjęcia, a nie w róg całego okna podglądu, niezależnie
     od proporcji fotografii. max-width/max-height liczone są przez vw/vh wprost na
     obrazku (nie jako % rodzica), bo procent wysokości względem kontenera o wysokości
     auto (jak .lightbox-stage) jest przez CSS ignorowany. */
  .lightbox-stage{
    position:relative;
    z-index:1;
    display:inline-block;
    line-height:0;
  }
  .lightbox-img{
    display:block;
    max-width:calc(100vw - 3rem);
    max-height:calc(100vh - 3rem);
    width:auto;height:auto;
    border-radius:6px;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
  }
  /* z-index:2, jawnie nad .lightbox-stage (1) - inaczej, dla dostatecznie dużego
     zdjęcia sięgającego blisko krawędzi (a max-width tych zdjęć to prawie cała
     szerokość ekranu), obrazek malowałby się NAD przyciskami zamiast pod nimi
     (w DOM-ie stage jest po nich, więc bez jawnego z-index wygrywałby kolejnością). */
  .lightbox-close{
    position:absolute;top:clamp(1.25rem,4vw,3rem);right:clamp(1.25rem,4vw,3rem);
    z-index:2;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(20,15,31,0.7);
    color:var(--cream);
    padding:0;
    cursor:pointer;
  }
  /* × rysowany dwiema belkami zamiast znaku "×" - glif tekstowy ma niesymetryczny
     światłocień wokół siebie w metrykach czcionki, więc flex align/justify-center
     centrowało "wiersz tekstu", nie faktyczny kształt (widocznie krzywo). Belki
     zakotwiczone wprost w środku przycisku (top/left 50% + translate(-50%,-50%))
     są centrowane co do piksela, niezależnie od czcionki. */
  .lightbox-close::before,
  .lightbox-close::after{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:16px;height:2px;
    background:currentColor;
    border-radius:1px;
  }
  .lightbox-close::before{transform:translate(-50%,-50%) rotate(45deg);}
  .lightbox-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .lightbox-close:hover{color:var(--sun);}
  .lightbox-nav{
    position:absolute;top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(20,15,31,0.7);
    color:var(--cream);
    padding:0;
    cursor:pointer;
  }
  /* Strzałki tym samym trikiem co .scroll-hint-arrow (róg obramowania obrócony
     45deg) - w przeciwieństwie do glifów "‹"/"›" ich box jest dokładnie tym, co
     widać, więc justify/align-center w rodzicu centruje je bez przesunięcia. */
  .lightbox-nav::before{
    content:'';
    width:12px;height:12px;
    border-style:solid;
    border-color:currentColor;
    border-width:0 2px 2px 0;
  }
  .lightbox-prev::before{transform:translate(5px, 0.5px) rotate(135deg);}
  .lightbox-next::before{transform:translate(-4px, 0.5px) rotate(-45deg);}
  .lightbox-nav:hover{color:var(--sun);}
  .lightbox-prev{left:clamp(0.6rem,3vw,2rem);}
  .lightbox-next{right:clamp(0.6rem,3vw,2rem);}
  .lightbox-credit{
    position:absolute;
    left:0.9rem;
    bottom:0.7rem;
    font-family:"Space Mono",monospace;
    font-size:0.78rem;
    color:var(--cream);
    opacity:0.85;
    text-shadow:0 1px 4px rgba(0,0,0,0.85);
    pointer-events:none;
  }
  @media (max-width:560px){
    .lightbox-nav{width:40px;height:40px;font-size:1.6rem;}
  }

  /* ---------- social section (light — social embeds can't go dark) ---------- */
  .social-section{
    background:#ffffff;
  }
  .social-section .eyebrow{color:var(--cosmic);}
  .social-section h2{color:#1c1330;}
  .social-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.6rem;
    margin-top:2rem;
  }
  .social-grid.social-grid--split{
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
  }
  .social-col{
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    flex:0 1 500px;
    min-width:0;
  }
  .postcard-embed{
    width:100%;
    max-width:500px;
  }
  .embed-wrap{
    overflow-x:auto;
    display:flex;
    justify-content:center;
    scrollbar-width:none; /* Firefox */
    -ms-overflow-style:none; /* stary Edge */
  }
  .embed-wrap::-webkit-scrollbar{
    display:none; /* Chrome/Safari/nowy Edge */
  }
  /* embed-inner ma STAŁĄ, określoną szerokość (dokładnie tę, o którą prosimy oba SDK-i:
     data-width="500" dla Facebooka, max-width:540px dla Instagrama) - to celowo NIE jest
     "naturalna"/shrink-to-fit szerokość. Oba embedy wewnętrznie liczą swój rozmiar
     procentowo (np. blockquote Instagrama ma width:calc(100% - 2px)) - bez określonej
     szerokości rodzica te procenty są nierozwiązywalne i przeglądarka spada do
     min-width (326px dla Instagrama), stąd "mega wąski" post. Stała szerokość daje im
     definitywny punkt odniesienia; js/embed-fit.js i tak dynamicznie mierzy realny
     rozmiar i skaluje go pod szerokość karty, więc liczba tutaj nie musi być idealna.
     flex-shrink:0 chroni przed ściśnięciem tego boxu przez flexbox przed pomiarem. */
  .embed-inner{
    flex-shrink:0;
    width:500px;
    max-width:none;
    /* Białe tło od razu, zanim FB/Instagram doładują właściwą treść (oba osadzenia
       i tak są białe) - bez tego karta przez chwilę pokazywała ciemne tło strony,
       które potem "mrugało" na biało w momencie załadowania. */
    background:#fff;
    border-radius:6px;
  }

  /* ---------- about / alien section ---------- */
  .about-section{background:var(--void);}
  .alien-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.2rem;
    user-select:none;
    -webkit-user-select:none;
  }
  .alien-photo{-webkit-user-drag:none;}
  @media (pointer:coarse){
    /* Na dotykowych ekranach długie przytrzymanie na <img> pokazuje natywne menu
       "Zapisz zdjęcie"/"Kopiuj zdjęcie" - -webkit-touch-callout wyłącza je na
       iOS, a pointer-events:none sprawia, że dotyk w ogóle nie trafia w <img>
       (na Androidzie to jedyny pewny sposób, bo tam nie ma odpowiednika
       touch-callout), więc menu zapisu obrazu się nie pojawia. Zdjęcia i tak
       nie są klikalne, więc nic to nie psuje. */
    .alien-photo{
      -webkit-touch-callout:none;
      pointer-events:none;
    }
  }
  @media (max-width:1299px){
    .alien-grid{grid-template-columns:repeat(2,1fr);}
  }
  /* Na szerokich ekranach siatka kosmitów wychodzi poza szerokość .container
     (nagłówki sekcji zostają na miejscu) - klasyczny "breakout" wycentrowany
     względem viewportu, niezależnie od wąskiego rodzica. */
  @media (min-width:1300px){
    .alien-grid{
      width:90vw;
      max-width:1600px;
      margin-left:50%;
      margin-top:2rem;
      transform:translateX(-50%);
    }
  }
  @media (max-width:600px){
    .alien-grid{grid-template-columns:1fr;}
    /* Karta na całą szerokość ekranu - nawet wtedy długa wartość ("Artylerzysta")
       może nie zmieścić się obok klucza w jednym wierszu. Zamiast łamać wyraz,
       klucz i wartość lądują na osobnych liniach, żeby wartość dostała pełną
       szerokość karty. */
    .alien-info-row{
      grid-template-columns:1fr;
      row-gap:0.15rem;
      padding:0.5rem 0;
    }
  }
  .alien-card{
    background:var(--void-soft);
    border:1px solid var(--line);
    border-radius:6px;
    padding:0.6rem;
    position:relative;
    overflow:hidden;
  }
  .alien-photo{
    display:block;
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:3px;
  }
  .alien-caption{
    padding:0.8rem 0.6rem 0.2rem 0.3rem;
  }
  .alien-info-row{
    display:grid;
    grid-template-columns:12ch 1fr;
    align-items:baseline;
    gap:0.5rem;
    padding:0.3rem 0;
    border-bottom:1px solid var(--line);
    font-family:"Space Mono",monospace;
    font-size:0.78rem;
  }
  .alien-info-row:last-child{border-bottom:none;}
  .alien-info-key{
    color:var(--muted-dim);
    white-space:nowrap;
  }
  .alien-info-key::after{content:":";}
  .alien-info-val{
    min-width:0;
    font-size:1rem;
    color:var(--cream);
    font-weight:700;
    transition:color 0.15s ease;
  }
  /* Trwa tylko na czas animacji dekodowania (patrz scrambleTo w js/main.js) - klasa
     jest zdejmowana, gdy tekst dolatuje do celu, więc kolor wraca do zwykłego cream. */
  .alien-info-val.is-decoding,
  .alien-info-val.is-real{
    color:var(--sun);
    text-shadow:0 0 6px rgba(255,123,62,0.65), 0 0 14px rgba(255,123,62,0.35);
  }

  /* ---------- contact ---------- */
  .contact-section{background:#191129;}
  .contact-lede{
    font-size:1.15rem;
    font-weight:600;
    color:var(--muted);
  }
  .contact-panel{
    background:var(--void-soft);
    border:1px solid var(--line-strong);
    border-radius:8px;
    padding:clamp(1.6rem,4vw,3rem);
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:2.5rem;
  }
  .contact-rows{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .contact-row{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    padding:1.1rem 0;border-bottom:1px solid var(--line);
  }
  .contact-row:first-child{padding-top:0;}
  .contact-row:last-child{border-bottom:none;}
  .contact-key{
    font-family:"Space Mono",monospace;font-size:0.72rem;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--muted-dim);
  }
  .contact-val{
    font-family:"Unbounded",sans-serif;font-weight:600;font-size:1.02rem;
    text-decoration:none;color:var(--cream);
    text-align:right;
  }
  .contact-val:hover{color:var(--cosmic);}
  .contact-cta{
    align-self:flex-end;
    margin-top:1.4rem;
    background:var(--cosmic);
    color:#0a1a2e;
    border-color:transparent;
  }
  .contact-cta:hover{background:#7cc0f7;}
  .contact-side{
    display:flex;flex-direction:column;justify-content:center;gap:1.2rem;
    border-left:1px solid var(--line);
    padding-left:clamp(1.5rem,3vw,2.5rem);
  }
  .contact-side p{color:var(--muted);font-size:0.95rem;}
  .contact-producer-logo{
    width:auto;height:88px;
    align-self:flex-start;
    filter:brightness(0) invert(1);
  }

  /* ---------- footer ---------- */
  .footer{
    padding:2.6rem clamp(1.25rem,4vw,3rem) 2.2rem;
    background:var(--void);
    text-align:center;
  }
  .footer-fine{
    font-family:"Space Mono",monospace;font-size:0.85rem;color:var(--muted-dim);
    margin:0;
  }
  .footer-credit{margin-top:0.8rem;}
  /* Space Mono nie ma własnego glifu "©" - przeglądarka po cichu podstawia go
     z czcionki systemowej, która rysuje go zauważalnie mniejszym niż reszta
     tekstu przy tym samym font-size. Kompensujemy to większym rozmiarem tylko
     dla tego znaku. */
  .copyright-symbol{
    display:inline-block;
    font-size:1.35em;
    vertical-align:-0.16em;
  }
  .footer-fine a{
    color:inherit;
    text-decoration:none;
    transition:color .18s ease;
  }
  .footer-fine a:hover,
  .footer-fine a:focus-visible{color:var(--sun);}

  @media (max-width:820px){
    .map-grid,.contact-panel{grid-template-columns:1fr;}
    .contact-side{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:1.5rem;}
  }
  @media (max-width:520px){
    .contact-row{flex-direction:column;align-items:flex-start;gap:0.3rem;}
    .contact-val{text-align:left;}
    .contact-cta{align-self:flex-start;}
  }