/*
 * mobile.css
 * Responsywne uzupelnienie dla statycznej kopii phpBB 3.0.14.
 * Motyw bazowy: JPN-BlackBlue / Black Pearl.
 *
 * Wczytuj TEN plik po stylesheet.css.
 * Oryginalny arkusz pozostaje bez zmian.
 * Celowo nie definiujemy tutaj kolorow ani tla motywu.
 */

@media only screen and (max-width: 700px) {

  /* Glowny kontener ma w HTML szerokosc wpisana na sztywno: 960px. */
  body {
    margin: 8px 4px 0 4px;
    min-width: 0;
  }

  body > div[style*="width:960px"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  /* Usuwamy tylko waskie boczne kolumny z cieniem. */
  .leftshadow,
  .rightshadow {
    display: none;
    width: 0 !important;
  }

  td.np-body {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #wrapcentre {
    margin: 10px 5px 0 5px;
    min-width: 0;
  }

  #pageheader,
  #pagecontent,
  #pagefooter,
  #bottom_logo_ext,
  #bottom_logo {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ------------------------------------------------------------
     NAGLOWEK
     Zachowujemy oryginalna tabele i jej dwie uzywane komorki.
     Nie zamieniamy tabeli, wiersza ani komorek na flex/block.
     ------------------------------------------------------------ */

  #top_logo {
    height: auto !important;
    min-height: 150px;
    max-width: 100%;
    box-sizing: border-box;
    /* Bez deklaracji background: pozostaje grafika z Black Pearl. */
  }

  #top_logo > table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    height: 150px;
  }

  #top_logo > table td {
    box-sizing: border-box;
    vertical-align: middle;
    white-space: normal;
  }

  #top_logo > table td:first-child {
    width: 46% !important;
    padding: 0 3px;
  }

  #top_logo > table td:nth-child(2) {
    width: 54% !important;
    padding: 3px 5px;
    overflow-wrap: anywhere;
  }

  #top_logo > table td:nth-child(3) {
    display: none;
  }

  #top_logo td:first-child img {
    display: block;
    width: 100% !important;
    max-width: 410px !important;
    height: auto !important;
    margin: 0 auto;
  }

  #top_logo h1 {
    margin: 0 0 3px 0;
    font-size: 1.8em;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

#top_logo h1 img {
    max-width: 100% !important;
    height: 14px !important;
}

  #top_logo .gen {
    display: block;
    font-size: 1.1em;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* Menu jest osobna tabela bezposrednio po #top_logo. */
  #top_logo + table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  .forum-buttons {
    height: auto !important;
    min-height: 24px;
    padding: 6px 4px !important;
    line-height: 1.7;
    white-space: normal !important;
    text-align: center;
    box-sizing: border-box;
  }

  .forum-buttons img {
    vertical-align: middle;
  }

  /* ------------------------------------------------------------
     PASKI NAWIGACJI / BC-TBL
     Ważne: .bc-links-left nie moze byc float:left na telefonie.
     Float powodowal, ze rodzic nie obejmowal wysokosci tej sekcji.
     Iframe pozostaje inline, aby nie rozbijac niepotrzebnie wiersza.
     ------------------------------------------------------------ */

  .bc-tbl {
    width: 100%;
    max-width: 100%;
    margin: 6px 0;
    box-sizing: border-box;
    clear: both;
  }

  .bc-header {
    margin: 0;
    padding: 5px 7px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .bc-header a {
    white-space: normal;
  }

  .bc-links {
    margin: 0;
    padding: 5px 7px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .bc-links-left {
    float: none !important;
    position: static !important;
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 0 4px 0;
    text-align: left;
  }

  .bc-links iframe {
    display: inline-block;
    max-width: 100% !important;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .bc-links a {
    white-space: normal;
  }

  /* ------------------------------------------------------------
     OBRAZY, IFRAME I TRESC POSTOW
     Ograniczamy szerokosc, ale nie zmieniamy kolorow ani tla.
     ------------------------------------------------------------ */

  #wrapcentre img,
  #pagecontent img,
  #bottom_logo img {
    max-width: 100%;
    height: auto;
  }

  iframe {
    max-width: 100%;
  }

  #pagecontent table.tablebg {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  #pagecontent table.tablebg th:first-child {
    width: 76px !important;
    white-space: normal;
  }

  #pagecontent table.tablebg td.row-post-top:first-child,
  #pagecontent table.tablebg td.row-post-body:first-child {
    width: 76px !important;
    max-width: 76px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  #pagecontent table.tablebg td.row-post-top:nth-child(2),
  #pagecontent table.tablebg td.row-post-body:nth-child(2) {
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  #pagecontent td.row-post-body:first-child table {
    width: 100% !important;
    max-width: 100%;
  }

  /* Nie zmieniamy bazowego rozmiaru .postbody z oryginalnego stylu. */
  #pagecontent .postbody {
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  #pagecontent table table {
    max-width: 100%;
  }

  #pagecontent pre,
  #pagecontent .codecontent,
  #pagecontent .quotecontent,
  #pagecontent .attachcontent {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
  }

  #pagecontent .quotetitle,
  #pagecontent .codetitle,
  #pagecontent .attachtitle {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  #pagecontent .row-post-bottom {
    white-space: normal;
  }

  /* Stopka: jej komorki moga przejsc do kolejnych wierszy. */
  #bottom_logo table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  #bottom_logo td {
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  /* Strona glowna: zostawiamy ikone, nazwe i opis dzialu;
     liczniki i informacje o ostatnim poscie chowamy na waskim ekranie. */
  #wrapcentre table.tablebg:has(a.forumlink) {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  #wrapcentre table.tablebg:has(a.forumlink) tr > th:nth-child(n+2),
  #wrapcentre table.tablebg:has(a.forumlink) tr > td:nth-child(n+3) {
    display: none;
  }

  #wrapcentre table.tablebg:has(a.forumlink) td:nth-child(2) {
    width: auto !important;
    overflow-wrap: anywhere;
  }

  /* Formularze nie powinny wypychac strony poza ekran. */
  input,
  select,
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  #wrapcentre form {
    max-width: 100%;
  }
}

@media only screen and (max-width: 380px) {
  #top_logo > table td:first-child {
    width: 43% !important;
  }

  #top_logo > table td:nth-child(2) {
    width: 57% !important;
  }

  #top_logo h1 {
    font-size: 1.6em;
  }

  #pagecontent table.tablebg th:first-child,
  #pagecontent table.tablebg td.row-post-top:first-child,
  #pagecontent table.tablebg td.row-post-body:first-child {
    width: 66px !important;
    max-width: 66px;
  }
}

/* ============================================================
   DOPRACOWANIE DLA index-proba.html
   Dodane po analizie rzeczywistego HTML strony testowej.
   Nie zmienia kolorow ani grafik motywu Black Pearl.
   ============================================================ */

@media only screen and (max-width: 700px) {

  /* Gdy naglowek zwieksza wysokosc, tekstura nie ma byc
     powtarzana pionowo w kilku pasach. */
  #top_logo {
    background-repeat: repeat-x !important;
  }

  /* Pasek breadcrumb moze zawinac sie do kilku wierszy.
     Oryginalny shorthand nie podawal repeat, wiec domyslnie
     tekstura byla powtarzana rowniez pionowo. */
  .bc-header {
    background-repeat: repeat-x !important;
  }

  /* Tabele dzialow: automatyczny algorytm szerokosci zamiast
     fixed, ktory przy ukrytych kolumnach pozostawial puste miejsce. */
  #wrapcentre table.tablebg:has(a.forumlink) {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  #wrapcentre table.tablebg:has(a.forumlink) tr > td:first-child {
    width: 42px !important;
    min-width: 42px;
  }

  #wrapcentre table.tablebg:has(a.forumlink) tr > td:nth-child(2) {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Zegar u gory: 12 px nie wystarcza na tresc iframe.
     Dajemy mu osobny wiersz i wieksza wysokosc. */
  .bc-links-left iframe[src*="czas.html"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 20px !important;
    margin: 0 0 3px 0 !important;
    vertical-align: top;
  }

  .bc-links-left iframe[src*="czas.html"] + br {
    display: none !important;
  }

  /* Dolny zegar ma stale 290 x 10 px w HTML.
     Na waskim ekranie rowniez dostaje wlasny wiersz. */
  .bc-links-left iframe[src*="czas2.html"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 20px !important;
    margin: 0 0 3px 0 !important;
    vertical-align: top;
  }
}