/* =====================================================================
   gamingonlinezone.com - "PLANSZA MANGI"

   SZKIELET: siatka kadrow o roznych rozmiarach, grube czarne rynny,
   wyrazna kolejnosc czytania. Serwis o anime i gamingu ma prawo wygladac
   jak medium, o ktorym pisze - to jest uzasadnienie, nie ozdoba.

   PALETA: tusz i papier, jeden raster i jeden krzykliwy zolty.
   Zolty jest WYPELNIENIEM kadru, nigdy kolorem tekstu - na papierze
   mialby za maly kontrast.

   WLASNY KOMPONENT: kadr z rastrem (screentone) w kropki, dokladnie jak
   cieniowanie w druku czarno-bialym. Kropki sa gradientem CSS, nie obrazkiem.

   Swiadomie NIE robimy: neonu na czerni (wyglad portfolio programisty),
   ciemnego kinowego skinu (zajety) ani ciepłego papieru z szeryfem (zajety).
   ===================================================================== */

:root {
  --papier:  #F5F3EE;
  --tusz:    #0B0B0B;
  --raster:  #D2CFC8;
  --zolty:   #FFE100;
  --cichy:   #6A675F;

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --tekst:   'Asap', system-ui, sans-serif;
  --mono:    'Azeret Mono', ui-monospace, monospace;

  --rynna: 5px;      /* odstep miedzy kadrami */
  --ramka: 3px;      /* grubosc konturu kadru */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.goz {
  margin: 0;
  background: var(--papier);
  color: var(--tusz);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------
   Pasek: nie jest trzykolumnowym menu, tylko naglowkiem planszy
   --------------------------------------------------------------- */

.goz-pasek {
  border-bottom: var(--ramka) solid var(--tusz);
  padding: 0.9rem clamp(0.9rem, 3vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.6rem;
}

.goz-znak {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.goz-znak-a { background: var(--tusz); color: var(--papier); padding: 0.06em 0.3em; }
.goz-znak-b { background: var(--zolty); padding: 0.06em 0.3em; }

.goz-nawigacja {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.goz-nawigacja a { border-bottom: 2px solid transparent; padding-bottom: 2px; }
.goz-nawigacja a:hover { border-bottom-color: var(--tusz); }

/* ---------------------------------------------------------------
   Plansza kadrow
   --------------------------------------------------------------- */

.goz-plansza {
  padding: clamp(0.9rem, 3vw, 2.4rem);
  max-width: 1320px;
  margin: 0 auto;
}

.goz-siatka {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--rynna);
  margin: 0 0 var(--rynna);
}

.goz-kadr {
  border: var(--ramka) solid var(--tusz);
  background: var(--papier);
  padding: 1.05rem 1.05rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 150px;
  position: relative;
  transition: transform 90ms linear;
}
.goz-kadr:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tusz); }

/* Rozmiary kadrow - stad bierze sie nierownomiernosc planszy */
.goz-duzy   { grid-column: span 4; grid-row: span 2; min-height: 300px; }
.goz-sredni { grid-column: span 2; }
.goz-maly   { grid-column: span 2; }

/* Kadr z rastrem: cieniowanie jak w druku czarno-bialym, kropki z CSS */
.goz-raster {
  background-color: var(--papier);
  background-image: radial-gradient(var(--raster) 1.3px, transparent 1.3px);
  background-size: 7px 7px;
}
/* Kadr zolty: wypelnienie, tekst nadal tuszem */
.goz-zolty { background: var(--zolty); }

.goz-plakietka {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--tusz);
  color: var(--papier);
  padding: 0.18em 0.55em;
}

.goz-kadr h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.32rem;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.goz-duzy h2 { font-size: clamp(1.9rem, 3.9vw, 3.1rem); }

.goz-zajawka { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.goz-duzy .goz-zajawka { font-size: 1.02rem; max-width: 46ch; }

.goz-data {
  margin-top: auto;
  padding-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--cichy);
}
.goz-zolty .goz-data { color: #5A5200; }

/* Kadr tytulowy planszy - hero bez zdjecia, sama typografia */
.goz-tytulowy {
  grid-column: 1 / -1;
  border: var(--ramka) solid var(--tusz);
  background: var(--tusz);
  color: var(--papier);
  padding: clamp(1.4rem, 4vw, 3rem);
}
.goz-tytulowy p.goz-nad {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zolty);
}
.goz-tytulowy h1 {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.goz-tytulowy .goz-lid {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.55;
  color: #E3E1DB;
}

/* ---------------------------------------------------------------
   Wpis
   --------------------------------------------------------------- */

.goz-wpis { max-width: 1320px; margin: 0 auto; }

.goz-wpis-glowica {
  border: var(--ramka) solid var(--tusz);
  background: var(--tusz);
  color: var(--papier);
  padding: clamp(1.3rem, 4vw, 2.8rem);
  margin-bottom: var(--rynna);
}
.goz-wpis-glowica .goz-plakietka { background: var(--zolty); color: var(--tusz); }
.goz-wpis-glowica h1 {
  margin: 0.7rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}
.goz-wpis-glowica .goz-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A9A69E;
}

.goz-tresc {
  border: var(--ramka) solid var(--tusz);
  background: var(--papier);
  padding: clamp(1.3rem, 4vw, 2.8rem);
  font-size: 1.03rem;
}
.goz-tresc > :first-child { margin-top: 0; }
.goz-tresc > :last-child  { margin-bottom: 0; }

.goz-tresc p { max-width: 70ch; margin: 0 0 1.15rem; }

.goz-tresc h2 {
  margin: 2.3rem 0 0.8rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
}
.goz-tresc h2::before {
  content: '';
  display: block;
  width: 3.2rem;
  height: var(--ramka);
  background: var(--tusz);
  margin-bottom: 0.6rem;
}
.goz-tresc h3 {
  margin: 1.7rem 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.24rem;
  text-transform: uppercase;
}

.goz-tresc ul, .goz-tresc ol { max-width: 70ch; margin: 0 0 1.15rem; padding-left: 1.2rem; }
.goz-tresc li { margin-bottom: 0.4rem; }

.goz-tresc a { border-bottom: 2px solid var(--zolty); }
.goz-tresc a:hover { background: var(--zolty); }

.goz-tresc blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  border: var(--ramka) solid var(--tusz);
  background-image: radial-gradient(var(--raster) 1.3px, transparent 1.3px);
  background-size: 7px 7px;
  font-size: 1.06rem;
}
.goz-tresc blockquote p:last-child { margin-bottom: 0; }

.goz-tresc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.94rem;
}
.goz-tresc th, .goz-tresc td {
  border: 2px solid var(--tusz);
  padding: 0.5rem 0.65rem;
  text-align: left;
}
.goz-tresc th {
  background: var(--tusz);
  color: var(--papier);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.goz-przewin { overflow-x: auto; }

.goz-sprawdzono {
  margin-top: 1.8rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--tusz);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--cichy);
}

/* ---------------------------------------------------------------
   Stopka
   --------------------------------------------------------------- */

.goz-stopka {
  border-top: var(--ramka) solid var(--tusz);
  margin-top: 2.4rem;
  padding: 1.6rem clamp(0.9rem, 3vw, 2.4rem) 2.2rem;
  font-size: 0.9rem;
  color: var(--cichy);
}
.goz-stopka p { max-width: 72ch; margin: 0 0 0.6rem; }
.goz-stopka-drobne {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.goz-pusto { color: var(--cichy); font-style: italic; }

/* ---------------------------------------------------------------
   Male ekrany: plansza z szesciu kolumn schodzi do dwoch, potem jednej.
   Kadry nie moga rozpychac szerokosci - sprawdzane na 360.
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .goz-siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .goz-duzy   { grid-column: span 4; grid-row: auto; min-height: 220px; }
  .goz-sredni, .goz-maly { grid-column: span 2; }
}

@media (max-width: 620px) {
  :root { --rynna: 4px; --ramka: 2px; }
  .goz-siatka { grid-template-columns: minmax(0, 1fr); }
  .goz-duzy, .goz-sredni, .goz-maly { grid-column: 1 / -1; min-height: 0; }
  .goz-kadr:hover { transform: none; box-shadow: none; }
  .goz-nawigacja { margin-left: 0; width: 100%; }
  .goz-znak { font-size: 1.25rem; }
}