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

body {
  overflow: hidden;
  font: 400 12px/1 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color: #6a6a6a;
}

video {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: contain;
  background: #000;
}

/* podpis — róg, nie środek */
.credit {
  position: fixed;
  left: 20px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.credit a,
.credit span {
  color: #6a6a6a;
  text-decoration: none;
}

.credit a:hover {
  color: #d8d8d8;
}

/* kreska postępu na samej krawędzi ekranu */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.bar span {
  display: block;
  width: 0;
  height: 100%;
  background: #cfcfcf;
}

/* zasłona pokazywana tylko wtedy, gdy przeglądarka zablokuje dźwięk;
   klikalna na całej powierzchni ekranu */
.gate {
  position: fixed;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  background: #000;
  font: inherit;
  letter-spacing: 0.05em;
  color: #6a6a6a;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gate[hidden] {
  display: none;
}

.gate:hover {
  color: #d8d8d8;
}

@media (max-width: 600px) {
  .credit { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}