:root{
  --circle-size: clamp(900px, 82vmin, 1400px);
  --icon-size:   clamp(200px, 26vmin, 300px);
  --dim: .78;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100dvh;
  display:flex;                 /* důležité: flex kontejner */
  justify-content:center;       /* centrování vodorovně */
  align-items:center;           /* centrování svisle */
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0b1020 url("images/background.png") center/cover fixed no-repeat;
}

header{
  text-align:center;
  padding:24px 16px 8px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
header h1{ margin:0 0 6px; font-size:clamp(22px, 4vw, 36px); }
header p { margin:0; color:#c9d1d9; }

.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .25s ease;
  z-index:9000;
}
body.modal-open .backdrop{ background:rgba(0,0,0,var(--dim)); pointer-events:auto; }

.circle{
  position:fixed; inset:0;
  width:var(--circle-size); height:var(--circle-size);
  margin:auto;
}
.circle span.label {
  display: none;
  }

.modal span.label,
.lightbox span.label {
  display: inline;
  }

.icon{
  position:absolute; top:50%; left:50%;
  width:var(--icon-size); height:var(--icon-size);
  border-radius:50%; overflow:hidden; cursor:pointer; outline:none;
  background:#000;
  transform: translate(-50%, -50%) translate(var(--tx,0px), var(--ty,0px));
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
}
.icon img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.icon:hover{
  transform: translate(-50%, -50%) translate(var(--tx,0px), var(--ty,0px)) scale(1.06);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.label{
  position:absolute; left:12px; bottom:10px;
  padding:6px 10px; font-weight:600;
  background:linear-gradient(to bottom right, rgba(0,0,0,.25), rgba(0,0,0,.6));
  border-radius:10px;
}

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  z-index:10000;
}
.modal[hidden]{ display:none; }

.modal-card {
  width: min(92vw, 1100px);
  max-height: min(90vh, 1000px);
  background: #000;
  border-radius: 16px;
  box-shadow: 0 24px 72px rgba(0,0,0,.75);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* vycentruje všechno horizontálně */
  gap: 12px;
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;    /* text uprostřed */
}

.modal-card img {
  width: 100%;
  height: min(62vh, 760px);
  object-fit: contain;
  object-position: center;
  background: #000;
  border-radius: 12px;
  cursor: pointer;
}

.modal-card h3 {
  margin: 12px 0 4px;
  font-size: clamp(18px, 2.4vw, 24px);
  text-align: center;
}

.modal-card p {
  margin: 0;
  color: #dcdcdc;
  line-height: 1.45;
  font-size: 15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;   /* popis taky doprostřed */
}