/* Tabliczki PRL: dekoracyjne emaliowane szyldy w tle. v1.1.0 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap');

section[id].tbl-host{position:relative;isolation:isolate}
.tbl-warstwa{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.tbl-miedza{position:absolute;left:0;right:0;pointer-events:none}

.tbl{
  --r:0deg;--o:.7;--w:190px;--amp:9;
  position:absolute;width:var(--w);box-sizing:border-box;
  padding:calc(var(--w)*.1) calc(var(--w)*.11);
  font-family:'Oswald','Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:700;font-style:normal;
  font-size:calc(var(--w)*.092);line-height:1.12;letter-spacing:.03em;text-transform:uppercase;text-align:center;
  color:#171412;border-radius:8px;
  background:linear-gradient(155deg,var(--e1) 0%,var(--e2) 55%,var(--e3) 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),inset 0 0 0 5px var(--e2),inset 0 0 0 6.5px var(--ramka),
    0 6px 14px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.25) inset;
  opacity:0;transform:rotate(var(--r));transform-origin:50% 4%;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  will-change:transform,opacity;
}
.tbl--z{--e1:#f3dd55;--e2:#e5c92f;--e3:#cfae22;--ramka:#b3281d}
.tbl--b{--e1:#f7f4ea;--e2:#e9e5d6;--e3:#d3cebb;--ramka:#171412}
.tbl--c{--e1:#f7f4ea;--e2:#e9e5d6;--e3:#d3cebb;--ramka:#b3281d}
.tbl--z .tbl__t b,.tbl--c .tbl__t b{color:#b3281d}
.tbl--b .tbl__t b{color:#b3281d}
.tbl__t{position:relative;z-index:2;display:block;transition:opacity .45s ease}
.tbl__t.tbl-zmiana{opacity:0}
.tbl__t b{font-weight:700;display:block;margin-bottom:.15em}
.tbl--r .tbl__t{color:#b3281d}

/* odpryski i rdza */
.tbl::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,#2b2118 0 2.2px,transparent 2.8px),
    radial-gradient(circle at 78% 12%,#3a2a1c 0 1.6px,transparent 2.2px),
    radial-gradient(circle at 91% 62%,#2b2118 0 2.6px,transparent 3.2px),
    radial-gradient(circle at 34% 86%,#3a2a1c 0 1.8px,transparent 2.4px),
    radial-gradient(circle at 58% 48%,rgba(60,40,25,.55) 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 6% 66%,#3a2a1c 0 1.4px,transparent 2px),
    radial-gradient(ellipse at 0 0,rgba(140,60,20,.75) 0,rgba(140,60,20,0) 26%),
    radial-gradient(ellipse at 100% 0,rgba(120,50,18,.7) 0,rgba(120,50,18,0) 24%),
    radial-gradient(ellipse at 100% 100%,rgba(130,55,20,.8) 0,rgba(130,55,20,0) 30%),
    radial-gradient(ellipse at 0 100%,rgba(110,45,16,.6) 0,rgba(110,45,16,0) 22%),
    linear-gradient(115deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 35%);
}
/* nity */
.tbl::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  --n:radial-gradient(circle at 35% 30%,#d9d6ce 0,#8d8a82 45%,#4a4742 80%,transparent 82%);
  background:
    var(--n) 7px 7px/9px 9px no-repeat,
    var(--n) calc(100% - 7px) 7px/9px 9px no-repeat,
    var(--n) 7px calc(100% - 7px)/9px 9px no-repeat,
    var(--n) calc(100% - 7px) calc(100% - 7px)/9px 9px no-repeat;
}

/* wejscie: bujniecie na jednym gwozdziu */
.tbl.tbl--in{opacity:var(--o);animation:tblBuja 1.7s cubic-bezier(.3,.7,.4,1) both}
@keyframes tblBuja{
  0%{opacity:0;transform:translateY(-14px) rotate(calc(var(--r) + var(--amp)*1.6deg))}
  30%{opacity:var(--o);transform:translateY(0) rotate(calc(var(--r) - var(--amp)*1deg))}
  52%{transform:rotate(calc(var(--r) + var(--amp)*.6deg))}
  72%{transform:rotate(calc(var(--r) - var(--amp)*.28deg))}
  88%{transform:rotate(calc(var(--r) + var(--amp)*.1deg))}
  100%{opacity:var(--o);transform:rotate(var(--r))}
}
.tbl.tbl--buja{animation:tblBuja2 1.2s ease-in-out both}
@keyframes tblBuja2{
  0%,100%{transform:rotate(var(--r))}
  30%{transform:rotate(calc(var(--r) + var(--amp)*.7deg))}
  60%{transform:rotate(calc(var(--r) - var(--amp)*.4deg))}
}

/* polozenie */
.tbl--l{left:6px}.tbl--p{right:6px}
@media (min-width:1280px){
  .tbl{--w:210px}
  .tbl--l{left:max(6px,calc((100% - 1180px)/2 - 230px))}
  .tbl--p{right:max(6px,calc((100% - 1180px)/2 - 230px))}
}
/* telefon i tablet: tylko oznaczone, male, jak naklejki w rogu */
@media (max-width:1099px){
  .tbl{--w:150px;--o:.5}
  .tbl:not(.tbl--m){display:none}
  .tbl--p{right:-14px}.tbl--l{left:-14px}
}
@media (max-width:600px){
  .tbl{--w:104px;--o:.45;--amp:7;top:8px!important}
  .tbl.tbl--stopka{top:auto!important}
}

/* tabliczka w stopce (klikalna) */
.tbl-stopka-wrap{display:flex;justify-content:center;padding:26px 14px 6px;flex:0 0 100%;grid-column:1/-1;width:100%;box-sizing:border-box;order:99}
.tbl.tbl--stopka{
  position:relative;display:block;border:0;margin:0;cursor:pointer;pointer-events:auto;
  --w:min(300px,86vw);--o:.9;opacity:0;font:inherit;
  font-family:'Oswald','Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:700;
  font-size:calc(var(--w)*.092);
  -webkit-tap-highlight-color:transparent;
}
.tbl.tbl--stopka:focus-visible{outline:3px solid #f3dd55;outline-offset:4px}
.tbl.tbl--stopka .tbl__t{min-height:2.3em}

/* ruch zredukowany: lagodniej, nie wylaczony */
@media (prefers-reduced-motion:reduce){
  .tbl{--amp:2}
  .tbl.tbl--in{animation-duration:.7s}
  .tbl.tbl--buja{animation-duration:.6s}
  .tbl__t{transition-duration:.2s}
}

/* v1.0.2 — rozmiary, grafika, klikalne + żartobliwy popup „kary" po 3 kliknięciach */
.tbl--mala{--w:150px}
.tbl--duza{--w:300px}
.tbl__ik{display:block;font-size:1.7em;line-height:1;margin-bottom:.08em;position:relative;z-index:2}
.tbl{pointer-events:auto}
.tbl-kara{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);max-width:min(92vw,420px);
  background:linear-gradient(170deg,#f3dd55,#e5c92f);color:#171412;border:3px solid #b3281d;border-radius:12px;
  padding:14px 42px 14px 16px;box-shadow:0 14px 44px rgba(0,0,0,.45);font-family:inherit;z-index:9999;opacity:0;
  pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,1.2,.3,1)}
.tbl-kara.jest{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tbl-kara b{display:block;color:#b3281d;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;margin-bottom:.35em}
.tbl-kara-t{display:block;font-size:.95rem;line-height:1.3}
.tbl-kara-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:1.1rem;color:#b3281d;cursor:pointer;line-height:1}
@media (prefers-reduced-motion:reduce){.tbl-kara{transition:opacity .3s}}
@media (max-width:1099px){.tbl--duza{--w:150px}.tbl--mala{--w:120px}}

/* v1.1.0: pozycje liczy JS (pomiar), CSS tylko punkt startowy; brak wystawania poza sekcje */
@media (max-width:1099px){.tbl--p{right:6px}.tbl--l{left:6px}}
.tbl.tbl--brak{display:none!important}

/* 1.1.1: na telefonie hero bez tabliczek (nachodziły na napis „Tu mówi Lechistan”) */
@media (max-width:600px){#radio > .tbl-warstwa{display:none}}