:root {
--bg-image: url("images/background2.jpg");
--btn-size: 180px; /* rozmiar przycisku (kwadrat) */
--btn-gap: 60px; /* odstęp między przyciskami */
--btn-radius: 18px; /* zaokrąglenie narożników */
--edge-padding: 60px; /* odsunięcie od krawędzi */
}


html, body { height: 100%; margin: 0; }


body {
background: var(--bg-image) center center / cover no-repeat fixed;
overflow: hidden; /* pełny ekran bez przewijania */
font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}

/* Ciemniejsza nakładka dla lepszego kontrastu */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.15);
      animation: bgShift 15s ease-in-out infinite;
    }

h1, h2, .btn16 .top span {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700; /* Bold */
  
}


.backdrop { position: fixed; inset:0; background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.30)); pointer-events:none; }


.edges { position: fixed; inset: 0; display: contents; }


.edge { position: absolute; display: flex; gap: var(--btn-gap); z-index: 2; }


.edge.top, .edge.bottom { left: 50%; transform: translateX(-50%); padding: 0 var(--edge-padding); }
.edge.top { top: var(--edge-padding); flex-direction: row; justify-content: center; }
.edge.bottom { bottom: var(--edge-padding); flex-direction: row; justify-content: center; }


.edge.left, .edge.right { top: 50%; transform: translateY(-50%); flex-direction: column; padding: var(--edge-padding) 0; }
.edge.left { left: var(--edge-padding); align-items: center; }
.edge.right { right: var(--edge-padding); align-items: center; }


.edge.top, .edge.bottom { flex-wrap: nowrap;   /* zawsze w jednej linii */
  justify-content: center;
  max-width: 100%;     /* usuń ogranicznik szerokości */
  overflow-x: auto;    /* jeśli za wąsko, pojawi się scroll */ }


/* --- PRZYCISK DWUOBSZAROWY (tytuł u góry + dół: ŚL | PL) --- */
.btn16 {
    
width: var(--btn-size);
aspect-ratio: 1/1; /* kwadrat */
border-radius: var(--btn-radius);
border: 2px solid rgba(255,255,255,.75);
background: rgba(255,255,255,.10);

backdrop-filter: blur(2px);
box-shadow: 0 4px 16px rgba(0,0,0,.25);
display: grid;
grid-template-rows: 1fr auto; /* góra (tytuł) / dół (podział na 2) */
overflow: hidden;
color: #fff;
}


.btn16 .top {
display: grid; place-items: center;
padding: 10px;
text-align: center;
user-select: none; /* tytuł nieklikalny */
pointer-events: none;
}


.btn16 .top span { font-size: 36px; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-weight: 700; }


.btn16 .bottom { display: grid; grid-template-columns: 1fr 1fr; }


.btn16 .lang {
appearance: none; border: 0; margin: 0; padding: 0;
height: 100%; width: 100%;
display: grid; place-items: center;
font: inherit; color: #fff; font-weight: 800; letter-spacing: .5px;
background: rgba(0,0,0,.25);
cursor: pointer; user-select: none;
transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}


.btn16 .lang + .lang { border-left: 1px solid rgba(255,255,255,.4); }


.btn16 .lang:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn16 .lang:active { background: rgba(255,255,255,.24); transform: translateY(0); }
.btn16 .lang:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }


.btn16 .lang.sl::after { content: "ŚL"; font-size: 42px; }
.btn16 .lang.pl::after { content: "PL"; font-size: 42px; }


@media (max-width: 768px) {
:root { --btn-size: 160px; --btn-gap: 12px; }
.btn16 .top span { font-size: 16px; }
}
@media (max-width: 480px) {
:root { --btn-size: 120px; --btn-gap: 10px; --edge-padding: 12px; }
.btn16 .top span { font-size: 14px; }
}


.center-brand { position: fixed; inset:0; display:grid; place-items:center; z-index:1; pointer-events:none; }
.center-brand h1 { margin:0; font-size: clamp(22px,4vw,44px); color:#fff; letter-spacing:.5px; text-shadow: 0 4px 24px rgba(0,0,0,.6); font-weight: 800; }

.header-bar, .footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  height: 50px;         /* wysokość paska */
  background: rgba(0,0,0,0.9); /* czarny z 85% krycia */
  z-index: 1000;        /* ponad przyciskami */
}

.header-bar { top: 0; }
.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: rgba(0,0,0,0.85);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: flex-end; /* treść do prawej */
  padding: 0 20px; /* odstęp od krawędzi */
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

@keyframes pulse-border {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
  70%  { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.btn16.playing {
  animation: pulse-border 1.5s infinite;
  border-color: #ffd700; /* złoty, podkreślający temat */
}