/* Styl „tablica”: lo-fi profesjonalny imageboard dla stron narzędzi (galeria, studio, foto-do-gry, syntezator, widżety).
   Beż i błękit klasycznych tablic, numerowane posty, greentext, monospace w nagłówkach, ostre ramki.
   Bez emoji, bez gradientów i glow, bez zaokrągleń. Włączasz klasą `tablica` na <body>, gry zostają bez zmian. */
body.tablica {
  --papier: #eef2ff; --kafel: #d6daf0; --tusz: #1f1b4d; --szary: #5b5f7a; --linia: #b7c5d9;
  --rdza: #b3261e; --zielen: #117743; --grin: #6b8a12; --bez: #f0e0d6; --bez-linia: #d9bfb7; --temat: #0f0c5d;
  background: var(--papier); color: #1c1c28; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  counter-reset: post;
}
.tablica a { color: var(--temat); }
.tablica a:hover { color: var(--rdza); }
.tablica .pa-btn { background: var(--tusz); border-color: var(--tusz); color: #fff; }
.tablica .pa-btn:hover { background: #fff; color: var(--tusz); box-shadow: 4px 4px 0 var(--tusz); }
.tablica .pa-btn.jasny { background: #fff; color: var(--tusz); }
.tablica .pa-btn[aria-pressed="true"], .tablica .pa-btn[aria-selected="true"], .tablica .pa-btn[aria-checked="true"] { background: var(--rdza); border-color: var(--tusz); color: #fff; }
.tablica select, .tablica input[type="number"], .tablica input[type="text"], .tablica textarea { background: #fff; border: 2px solid var(--tusz); color: #1c1c28; }
.tablica input[type="range"] { accent-color: var(--tusz); }

/* lista działów u góry, jak na tablicy: [ galeria / studio / ... ] */
.tablice { font: 12px/1.6 var(--mono); color: var(--szary); padding: 6px 0 10px; border-bottom: 1px solid var(--linia); margin-bottom: 14px; overflow-wrap: anywhere; }
.tablice a { text-decoration: none; }
.tablice a:hover, .tablice a[aria-current="page"] { text-decoration: underline; }
.tablice a[aria-current="page"] { color: var(--rdza); font-weight: 700; }
.tablice-nazwa { display: block; margin: 8px 0 2px; font-size: 30px !important; line-height: 1.2; color: var(--rdza); }
@media (max-width: 560px) { .tablice-nazwa { font-size: 20px !important; } }

/* telefon: linki działów jako cele dotyku 44 px, marginesy z wycięciem ekranu (notch) w poziomie */
body.tablica { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (pointer: coarse) {
  .tablice { line-height: 1.2; white-space: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .tablice::-webkit-scrollbar { display: none; }
  .tablice a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; }
  .tablica input[type="range"] { min-height: 44px; }
  .tablica select, .tablica input[type="number"], .tablica input[type="text"], .tablica input[type="file"], .tablica textarea { font-size: 16px; min-height: 44px; }
}

/* OP: beżowy post na górze z tematem */
.tablica .op { background: var(--bez); border: 2px solid var(--bez-linia); padding: 10px 14px 12px; margin-bottom: 14px; }
.tablica .op h1 { color: var(--temat); }
.tablica .op .etykieta { font: 12px var(--mono); color: var(--szary); }

/* posty: sekcje i karty jako odpowiedzi z numerem */
.tablica .post { counter-increment: post; background: var(--kafel); border: 2px solid var(--linia); padding: 6px 12px 12px; margin: 0 0 12px; min-width: 0; }
.tablica .post::before {
  content: "pixelkamil  No." counter(post, decimal-leading-zero);
  display: block; white-space: pre; font: 700 12px/2 var(--mono); color: var(--zielen); border-bottom: 1px dashed var(--linia); margin: 0 0 8px;
}
.tablica .post > h2:first-of-type, .tablica .post > h3:first-of-type, .tablica .post > legend { color: var(--temat); }
.tablica .zielony { color: var(--grin); font: 14px/1.5 var(--mono); margin: 2px 0; }
.tablica .zielony::before { content: ">"; }
.tablica pre { background: #1c1c28; color: #e8ecff; border: 1px solid var(--tusz); }
.tablica .mala, .tablica .wzor, .tablica .status, .tablica .czas { color: var(--szary); }
.tablica .stopka { color: var(--szary); border-top: 1px solid var(--linia); }
.tablica canvas { background: #fff; }
.tablica .post h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.tablica fieldset.post { padding-top: 4px; }
.tablica .demo.post { border-top: 1px solid var(--linia); padding-top: 6px; }
.tablica .op h1 { margin-top: 4px; }
.tablica .op .zielony:first-of-type { margin-top: 10px; }
/* maskotka (shih tzu) w poście OP, przerywana ramka jak w kolażu net artu */
.tablica .z-maskotka { display: flow-root; }
.tablica .maskotka { float: right; width: 240px; height: 180px; margin: 4px 0 8px 14px; border: 2px dashed var(--tusz); background: #0e1028; }
@media (max-width: 560px) { .tablica .maskotka { float: none; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 0 10px; } }
/* proces: pola w przerywanych ramkach połączone strzałkami */
.tablica .proces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin: 10px 0 0; padding: 0; list-style: none; font: 700 12px var(--mono); }
.tablica .proces li { position: relative; border: 2px dashed var(--tusz); padding: 4px 8px; background: #fff; }
.tablica .proces li + li::before { content: "\2192"; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); color: var(--rdza); }
.tablica .naglowek { max-width: none; }

/* wspólna stopka sieci stron tuKamil (lib/siec.js) */
.siec { font: 13px/2 var(--mono); color: var(--szary); padding: 8px 0 4px; overflow-wrap: anywhere; }
.siec a { white-space: nowrap; }
@media (hover: none) {
  .tablica .pa-btn:hover { background: var(--tusz); color: #fff; }
  .tablica .pa-btn.jasny:hover { background: #fff; color: var(--tusz); }
  .tablica .pa-btn[aria-pressed="true"]:hover, .tablica .pa-btn[aria-selected="true"]:hover, .tablica .pa-btn[aria-checked="true"]:hover { background: var(--rdza); color: #fff; }
  .tablica a:hover { color: var(--temat); }
}