/* ═══════════════════════════════════════════════════════════
   Galaxy of Star Wars — gosw.pl
   Zimny błękit = archiwum. Ciepły bursztyn = sygnał, wezwanie.
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:      #05080e;
  --void-2:    #070b13;
  --panel:     #0b1018;
  --line:      #17212e;
  --line-soft: #111926;

  --holo:      #8fb3d0;
  --holo-mid:  #6b85a0;
  --holo-dim:  #4a5f75;

  --beacon:    #f0a82e;
  --beacon-hi: #ffc871;
  --beacon-lo: #6d4a11;

  --paper:     #e3eaf2;
  --paper-2:   #b9c6d4;
  --lime:      #c9dc2a;

  --measure: 62ch;
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --rhythm: clamp(3.5rem, 8vw, 6rem);

  --sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; }
::selection{ background:var(--beacon); color:var(--void); }

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--beacon); outline-offset:3px; border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--beacon); color:var(--void);
  padding:.7rem 1.1rem; font-weight:700; z-index:99;
}
.skip:focus{ left:var(--gut); top:.5rem; }

.btn{
  display:inline-block; padding:.85rem 1.6rem;
  font-size:.9375rem; font-family:var(--sans);
  font-variation-settings:"wdth" 105,"wght" 600;
  text-decoration:none; border-radius:3px;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn-beacon{ background:var(--beacon); color:#170e00; border-color:var(--beacon); }
.btn-beacon:hover{ background:var(--beacon-hi); border-color:var(--beacon-hi); }
.btn-beacon[disabled]{ opacity:.55; cursor:default; }
.btn-ghost{ color:var(--holo); border-color:var(--line); background:transparent; }
.btn-ghost:hover{ color:var(--paper); border-color:var(--holo-dim); }

/* ── HERO ─────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate;
  min-height:min(94svh,760px);
  display:flex; align-items:center;
  padding:clamp(3.5rem,10vw,6rem) var(--gut) clamp(3rem,8vw,5rem);
  overflow:hidden;
}
.hero-tlo{
  position:absolute; inset:0; z-index:-2;
  background:#04060b url("grafika/tlo-kosmos.jpg") center 28% / cover no-repeat;
}
/* przygaszenie, żeby tekst był czytelny na każdej szerokości */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(5,8,14,.62) 0%, rgba(5,8,14,.42) 42%, var(--void) 97%),
    radial-gradient(70% 60% at 18% 42%, rgba(5,8,14,.72), transparent 72%);
}
.hero-tresc{ max-width:44rem; }

.hero-logo{
  display:block; width:min(100%,32rem); height:auto;
  margin:0 0 clamp(1.6rem,4vw,2.4rem);
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.75));
}

.carrier{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
  margin:0 0 1.15rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; color:var(--beacon);
}
.pip{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--beacon);
  animation:ping 2.6s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes ping{
  0%  { box-shadow:0 0 0 0 rgba(240,168,46,.55); opacity:1; }
  70% { box-shadow:0 0 0 13px rgba(240,168,46,0); opacity:.75; }
  100%{ box-shadow:0 0 0 0 rgba(240,168,46,0); opacity:1; }
}

.decree{
  margin:0;
  font-size:clamp(2.1rem,6.2vw,4rem);
  font-variation-settings:"wdth" 122,"wght" 800;
  line-height:.95; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--paper);
  text-shadow:0 2px 26px rgba(0,0,0,.6);
}
.reversal{
  margin:.85rem 0 0;
  font-size:clamp(1.15rem,3vw,1.7rem);
  font-variation-settings:"wdth" 112,"wght" 600;
  color:var(--beacon); letter-spacing:-.01em;
}
.hero-lede{
  margin:1.4rem 0 0; max-width:42ch;
  color:var(--paper-2); font-size:1.0625rem;
}
.hero .btn{ margin-top:clamp(1.8rem,4vw,2.4rem); }

/* ── CZYM BYŁO GoSW ───────────────────────────────────── */
.czym{
  padding:var(--rhythm) var(--gut) 0;
  max-width:1180px; margin-inline:auto;
}
.czym h2,.komunikator h2,.registry-head h2{
  margin:0 0 1.2rem;
  font-size:clamp(1.7rem,4.4vw,2.5rem);
  font-variation-settings:"wdth" 118,"wght" 750;
  line-height:1.05; letter-spacing:-.016em; color:var(--paper);
}
.czym-tekst{ max-width:var(--measure); }
.czym-tekst p{ margin:0 0 1.1rem; color:var(--paper-2); }
.czym-tekst em{ color:var(--holo); font-style:italic; }
.czym-koniec{
  max-width:var(--measure); margin:clamp(1.8rem,4vw,2.4rem) 0 0;
  font-size:.9375rem; color:var(--holo-mid);
}

/* ── KAFLE FRAKCJI ────────────────────────────────────── */
.kafle{
  list-style:none; margin:clamp(1.8rem,4vw,2.6rem) 0 0; padding:0;
  display:grid; gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.kafel{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:4px;
  background:var(--void-2);
}
/* wersja kolorowa leży pod spodem i odsłania się przy najechaniu */
.kafel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:170px;
  background-size:cover; background-position:center 45%;
  z-index:0;
}
.kafel-obraz{
  position:relative; z-index:1;
  display:block; height:170px;
  background-size:cover; background-position:center 45%;
  transition:opacity .35s ease, transform .5s ease;
}
.kafel:hover .kafel-obraz,
.kafel:focus-within .kafel-obraz{ opacity:0; transform:scale(1.03); }

.k-ngi::before{ background-image:url("grafika/kafel-ngi-hover.jpg"); }
.k-ngi .kafel-obraz{ background-image:url("grafika/kafel-ngi.jpg"); }
.k-opj::before{ background-image:url("grafika/kafel-opj-hover.jpg"); }
.k-opj .kafel-obraz{ background-image:url("grafika/kafel-opj.jpg"); }
.k-sm::before{ background-image:url("grafika/kafel-sm-hover.jpg"); }
.k-sm .kafel-obraz{ background-image:url("grafika/kafel-sm.jpg"); }

.kafel-opis{
  position:relative; z-index:2;
  display:block; padding:1rem 1.1rem 1.2rem;
  background:var(--void-2);
  font-size:.875rem; color:var(--holo-mid);
  border-top:1px solid var(--line-soft);
}
.kafel-opis strong{
  display:block; margin-bottom:.3rem;
  font-size:1rem; font-variation-settings:"wdth" 104,"wght" 650;
  color:var(--paper);
  transition:color .25s ease;
}
.k-ngi:hover .kafel-opis strong{ color:#e08a76; }
.k-opj:hover .kafel-opis strong{ color:#9ecbe8; }
.k-sm:hover  .kafel-opis strong{ color:#b8a9e0; }

/* ── KOMUNIKATOR ──────────────────────────────────────── */
.komunikator{
  padding:var(--rhythm) var(--gut) 0;
  max-width:1180px; margin-inline:auto;
}
.kom-naglowek{ max-width:var(--measure); }
.kom-naglowek p{ margin:0 0 1.8rem; color:var(--paper-2); }

.kom-form{
  background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:clamp(1rem,2.5vw,1.4rem);
}
.hp{ position:absolute; left:-9999px; }

.kom-pola{ display:grid; gap:.7rem; grid-template-columns:1fr; }
@media (min-width:46rem){
  .kom-pola{ grid-template-columns:13rem 1fr auto; align-items:center; }
}
.kom-pola input{
  width:100%; background:var(--void); color:var(--paper);
  border:1px solid var(--line); border-radius:3px;
  padding:.8rem .9rem; font-family:var(--sans); font-size:1rem;
}
#kom-nick{ font-family:var(--mono); font-size:.9375rem; }
.kom-pola input::placeholder{ color:var(--holo-dim); }
.kom-pola input:focus{ border-color:var(--beacon); }

.kom-status{
  margin:.8rem 0 0; min-height:1.4em;
  font-family:var(--mono); font-size:.8125rem; color:var(--holo-mid);
}
.kom-status.dobrze{ color:var(--beacon); }
.kom-status.zle{ color:#d98b74; }

.kom-lista{
  list-style:none; margin:1.8rem 0 0; padding:0;
  display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:4px; overflow:hidden;
}
.kom-lista:empty{ display:none; }
.kom-wpis{ background:var(--void-2); padding:1rem 1.1rem 1.1rem; }
.kom-glowa{
  display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  margin-bottom:.35rem;
}
.kom-nick{
  font-family:var(--mono); font-size:.875rem; font-weight:600;
  color:var(--beacon);
}
.kom-czas{ font-family:var(--mono); font-size:.6875rem; color:var(--holo-dim); }
.kom-tresc{
  margin:0; color:var(--paper-2);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.kom-pusto{
  margin:1.8rem 0 0; padding:1.4rem 1.1rem;
  border:1px dashed var(--line); border-radius:4px;
  font-family:var(--mono); font-size:.875rem; color:var(--holo-dim);
}

/* ── PASEK REJESTRU ───────────────────────────────────── */
.pasek{
  margin:var(--rhythm) auto 0; max-width:1180px;
  padding:clamp(1.4rem,3vw,1.9rem) var(--gut);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.2rem;
  border-block:1px solid var(--line-soft);
}
.pasek p{ margin:0; max-width:46ch; color:var(--holo-mid); font-size:.9375rem; }
.pasek strong{ color:var(--paper); }

/* ── PASEK GÓRNY (podstrony) ──────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap;
  padding:1.3rem var(--gut);
  border-bottom:1px solid var(--line-soft);
}
.mark{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--lime); text-decoration:none;
}
.topnav{ display:flex; gap:1.5rem; align-items:center; font-size:.875rem; }
.topnav a{ color:var(--holo); text-decoration:none; transition:color .18s; }
.topnav a:hover{ color:var(--paper); }
.topnav-cta{ color:var(--beacon) !important; font-weight:600; }

/* ── REJESTR (podstrona) ──────────────────────────────── */
.registry{
  padding:var(--rhythm) var(--gut) 0;
  max-width:1180px; margin-inline:auto;
}
.registry-head{ max-width:var(--measure); }
.registry-head > p{ margin:0 0 2.2rem; color:var(--paper-2); }

.finder label{
  display:block; margin-bottom:.5rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  color:var(--holo-mid);
}
.finder input{
  width:100%; max-width:26rem;
  background:var(--panel); color:var(--paper);
  border:1px solid var(--line); border-radius:3px;
  padding:.85rem 1rem; font-family:var(--mono); font-size:1rem;
}
.finder input::placeholder{ color:var(--holo-dim); }
.finder input:focus{ border-color:var(--beacon); }
.finder-status{
  margin:.8rem 0 0; min-height:1.6em;
  font-family:var(--mono); font-size:.8125rem; color:var(--holo-mid);
}
.finder-status.hit{ color:var(--beacon); }
.finder-status .go{
  color:var(--beacon); text-decoration:underline;
  text-underline-offset:3px; margin-left:.4rem;
}

.grupa{ margin-top:clamp(2.4rem,5vw,3.4rem); }
.grupa h3{
  margin:0 0 .5rem;
  font-size:clamp(1.1rem,2.5vw,1.35rem);
  font-variation-settings:"wdth" 108,"wght" 650; color:var(--paper);
}
.grupa-ile{
  font-family:var(--mono); font-size:.8125rem; font-weight:500;
  color:var(--beacon); margin-left:.5rem; vertical-align:.1em;
}
.grupa-opis{
  max-width:var(--measure); margin:0;
  font-size:.875rem; color:var(--holo-mid);
}

.wall{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.sig{
  background:var(--void-2); padding:.8rem .9rem .9rem;
  transition:background-color .2s, opacity .2s;
}
.sig-nick{
  display:block; font-family:var(--mono); font-size:.875rem; font-weight:500;
  color:var(--holo);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sig-meta{
  display:block; margin-top:.28rem;
  font-family:var(--mono); font-size:.6875rem;
  color:var(--holo-dim); font-variant-numeric:tabular-nums;
}
.wall-cichy .sig-nick{ color:var(--holo-mid); font-weight:400; }
.wall-cichy .sig{ padding-block:.65rem .75rem; }

.sig[data-frakcja]{ box-shadow:inset 2px 0 0 currentColor; }
.sig[data-frakcja="NGI"]{ color:#c96a5a; }
.sig[data-frakcja="OPJ"]{ color:#7fb2d9; }
.sig[data-frakcja="ŚM"]{ color:#9d8fc4; }
.sig[data-frakcja="kadra"]{ color:var(--lime); }

.sig[data-off="1"]{ opacity:.17; }
.sig[data-hit="1"]{
  background:rgba(240,168,46,.1);
  box-shadow:inset 0 0 0 1px var(--beacon-lo);
}
.sig[data-hit="1"] .sig-nick{ color:var(--beacon); }
.sig[data-hit="1"] .sig-meta{ color:var(--beacon-lo); }

.registry-foot{
  margin:1.8rem 0 0; max-width:var(--measure);
  font-size:.875rem; color:var(--holo-mid);
}
.registry-foot a{ color:var(--beacon); }

/* ── PROZA (podstrona) ────────────────────────────────── */
.prose{
  padding:var(--rhythm) var(--gut) 0;
  max-width:calc(var(--measure) + 2 * var(--gut));
  margin-inline:auto;
}
.prose h3{
  margin:2.4rem 0 1rem;
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  font-variation-settings:"wdth" 108,"wght" 650;
  color:var(--beacon);
}
.prose > h3:first-child{ margin-top:0; }
.prose p{ margin:0 0 1.2rem; color:var(--paper-2); }
.prose em{ color:var(--holo); font-style:italic; }
.prose strong{ color:var(--paper); font-weight:650; }
.pull{
  border-left:2px solid var(--beacon-lo);
  padding:.15rem 0 .15rem clamp(1.1rem,2.6vw,1.6rem);
  margin-block:1.9rem !important;
  color:var(--paper) !important;
}

/* ── STOPKA ───────────────────────────────────────────── */
.foot{
  margin:var(--rhythm) auto 0; max-width:1180px;
  border-top:1px solid var(--line-soft);
  padding:clamp(2.2rem,5vw,3.2rem) var(--gut) clamp(2.8rem,6vw,4rem);
}
.foot-mark{
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--lime);
}
.foot p{ margin:0 0 .8rem; max-width:56ch; font-size:.875rem; color:var(--holo-mid); }
.foot-meta{ font-family:var(--mono); font-size:.75rem; color:var(--holo-dim) !important; }
.foot-meta a{ color:var(--holo-mid); }

/* ── WEJŚCIE PRZY ŁADOWANIU ───────────────────────────── */
.js [data-rise]{ opacity:0; transform:translateY(14px); }
.js .ready [data-rise],
.ready [data-rise]{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.ready [data-rise="1"]{ transition-delay:.05s; }
.ready [data-rise="2"]{ transition-delay:.20s; }
.ready [data-rise="3"]{ transition-delay:.30s; }
.ready [data-rise="4"]{ transition-delay:.42s; }
.ready [data-rise="5"]{ transition-delay:.52s; }
.ready [data-rise="6"]{ transition-delay:.62s; }

@media (prefers-reduced-motion:reduce){
  [data-rise]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .pip{ animation:none; }
  .btn:active{ transform:none; }
  .kafel-obraz{ transition:opacity .01ms; }
  *{ transition-duration:.01ms !important; }
}

@media (max-width:34rem){
  .topnav{ gap:1rem; font-size:.8125rem; width:100%; }
  .wall{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .kafel-obraz,.kafel::before{ height:150px; }
}