/* ip.elsta.pl -- wyglad. Tlo bg.jpg (ilustracja elektryka, prawa strona), karta po lewej,
   kolory Elsta (#ef7d00 pomaranczowy, #152f4e granat). Fonty systemowe -- zadnych
   zewnetrznych (regula wlasciciela: fonty zawsze z wlasnego serwera).
   Wersja 1.6.0 (2026-09-16). Author: AWid, powered by Ai
   1.6.0: DWA OSOBNE UKLADY. Telefon: ilustracja paskiem u gory (stala proporcja), karta pod nia
           na pelnej szerokosci, strona przewijana. Desktop bez zmian (karta na ilustracji).
   1.5.1: przyciski na telefonie w jednym rzedzie (siatka 1fr 1fr)
   1.5.0: widok telefonu zmierzony na emulatorze (Pixel 7, Android 14, Chrome): marginesy
          bezpieczne (pasek gestow / wciecie ekranu), przyciski z polem dotyku >= 44 px,
          tabela szczegolow na waskich ekranach etykieta NAD wartoscia (kolumna 40% lamala
          "Przegladarka (User-Agent)" i "Nazwa w TLS (SNI)" na dwie linie) */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #2b2418 url("/bg.jpg") center right / cover no-repeat fixed;
  display: flex;
  align-items: center;
  padding: 4vh 5vw;
}
/* przyciemnienie lewej strony -- czytelnosc karty na jasnym tle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 47, 78, .78) 0%, rgba(21, 47, 78, .35) 45%, rgba(21, 47, 78, 0) 70%);
  pointer-events: none;
}
.karta {
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: 2rem 2.25rem;
  background: rgba(21, 47, 78, .88);
  border-left: 6px solid #ef7d00;
  border-radius: .5rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
}
.etykieta { margin: 0 0 .25rem; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: #ffd8a8; }
.ip {
  margin: 0;
  font: 700 clamp(2rem, 7vw, 3.4rem)/1.1 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  word-break: break-all;
}
.siec { margin: .5rem 0 0; font-size: 1rem; color: #ffd8a8; }
.przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
button {
  font: inherit;
  font-weight: 600;
  /* pole dotyku: 44 px to minimum, ponizej ktorego trafienie palcem staje sie loteria */
  min-height: 2.75rem;
  padding: .7rem 1.2rem;
  border: 0;
  border-radius: .35rem;
  background: #ef7d00;
  color: #fff;
  cursor: pointer;
}
button#kopiuj { background: transparent; border: 2px solid #ef7d00; }
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 3px solid #ffd8a8; outline-offset: 2px; }
button:disabled { opacity: .6; cursor: progress; }
#szczegoly { margin-top: 1.5rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-top: 1px solid rgba(255, 255, 255, .15); }
th { width: 40%; font-weight: 600; color: #ffd8a8; }
td { word-break: break-word; font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.stopka { margin: 1.5rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.rodo { margin: .5rem 0 0; font-size: .75rem; color: rgba(255, 255, 255, .6); }
.rodo a { color: #ffd8a8; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: #ffd8a8; }
[hidden] { display: none !important; }

/* ======================================================================
   UKLAD TELEFONU (< 40rem) -- osobny widok, nie "desktop scisniety":
   ilustracja jako pasek u gory o STALEJ proporcji (kadr na twarzy), karta POD nia
   na pelnej szerokosci. Strona przewija sie naturalnie, wiec rozwiniete szczegoly
   rozpychaja tresc W DOL (w ukladzie pływajacym karta rosla w gore i adres IP
   wyjezdzal nad ekran -- zmierzone na emulatorze Pixel 7).
   ====================================================================== */
@media (max-width: 40rem) {
  html, body { height: auto; }
  body {
    display: block;
    padding: 0;
    /* jednolity granat zamiast ilustracji: bez tego pod karta zostawal ciemny pas */
    background: #102a47;
  }
  /* ::before przestaje byc przyciemnieniem, a staje sie PASKIEM ILUSTRACJI w toku dokumentu */
  body::before {
    position: static;
    display: block;
    inset: auto;
    height: clamp(11rem, 34vh, 20rem);
    background: #2b2418 url("/bg.jpg") 62% 28% / cover no-repeat;
  }
  .karta {
    max-width: none;
    margin: 0;
    padding: 1.25rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: #102a47;
    border-left: 0;
    border-top: 4px solid #ef7d00;
    border-radius: 0;
    box-shadow: none;
  }
  .ip { font-size: clamp(2.1rem, 11vw, 3rem); }
  .przyciski { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.25rem; }
  button { padding: .7rem .5rem; }
}

/* telefon, tabela szczegolow: etykieta NAD wartoscia -- kolumna 40% zostawiala
   wartosciom ~180 px i lamala "Przegladarka (User-Agent)" na dwie linie */
@media (max-width: 40rem) {
  table, tbody, tr, th, td { display: block; width: auto; }
  tr { border-top: 1px solid rgba(255, 255, 255, .15); padding: .5rem 0; }
  th, td { border-top: 0; padding: 0; }
  th { width: auto; font-size: .85rem; }
  td { margin-top: .15rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }