:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 14px;
}

*{ box-sizing:border-box; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  margin:0;
  padding:28px;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(1200px 700px at 90% 10%, rgba(45,212,191,.18), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(255,255,255,.07), transparent 60%),
    var(--bg);
}

.wrap{
  max-width: 1280px;
  margin: 0 auto;
}

.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.logo{
  width: min(220px, 100%);
  height: auto;
  border-radius: 14px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}

.heroText{
  flex: 1;
  min-width: 260px;
}

h1{
  margin: 0;
  font-size: 30px;
  letter-spacing: .2px;
}

.sub{
  margin: 6px 0 0;
  color: var(--muted);
}

.heroRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.sectionTitle{
  text-align:center;
  font-size: 22px;
  line-height: 1.2;
  margin: 6px 0 14px;
  font-weight: 900;
  letter-spacing: .3px;
}

.groupGrid{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.groupCard{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
  background: rgba(0,0,0,.10);
  overflow: hidden;
}

.groupHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,30,.55);
}

.groupHead h3{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}

.groupMeta{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.tableWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.tbl{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.tbl th, .tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  white-space: nowrap;
}

.tbl thead th{
  background: rgba(10,16,30,.72);
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  letter-spacing: .2px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tbl tbody tr:nth-child(2n){
  background: rgba(255,255,255,.03);
}

.rank{
  font-weight: 900;
}

.best{
  font-weight: 900;
}

.muted{ color: var(--muted); }

.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{ background: rgba(255,255,255,.06); }

.foot{
  margin: 18px 0 0;
  text-align:center;
}

@media (max-width: 720px){
  body{ padding: 16px; }
  .tbl{ min-width: 520px; }
}
/* ===== PROGRAM SPORTOVNÍHO DNE (karty na střed, čas nad aktivitou) ===== */
.scheduleCenter{
  text-align: center;
}

.scheduleHeadCenter{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.scheduleTitleCenter{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.scheduleNoteCenter{
  color: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 13px;
}

.scheduleCards{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: center; /* zarovnání doprostřed */
}

.scheduleCardItem{
  width: min(760px, 100%);   /* aby to nebylo přes celou šířku */
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
}

.scheduleTimeTop{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.scheduleNameTop{
  font-weight: 800;
  font-size: 15px;
  color: rgba(255,255,255,.90);
}

.scheduleCardItem.isBreak{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.scheduleCardItem.isHighlight{
  background: rgba(124,92,255,.14);
  border-color: rgba(124,92,255,.30);
}

.scheduleCardItem.isParty{
  background: rgba(45,212,191,.12);
  border-color: rgba(45,212,191,.26);
}

@media (max-width: 720px){
  .scheduleCardItem{
    width: 100%;
  }
}
/* PROGRAM bez podkladového bloku (plain), vše uprostřed */
.schedulePlain{
  margin: 14px 0 22px;
}

.schedulePlainInner{
  max-width: 760px;
  margin: 0 auto; /* vystředění celé sekce */
  text-align: center;
}

.scheduleHeadCenter{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.scheduleTitleCenter{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.scheduleNoteCenter{
  color: rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 13px;
}

/* položky programu: bez “tabulky”, jen čistý stack */
.scheduleStack{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 14px; /* mezera mezi bloky */
}

.scheduleItem{
  width: 100%;
  padding: 0;              /* žádný box */
  border: 0;
  background: transparent; /* žádný podklad */
}

.scheduleTimeTop{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.scheduleNameTop{
  font-weight: 800;
  font-size: 16px;
  color: rgba(255,255,255,.90);
}

/* větší mezera mezi částmi programu */
.scheduleGap{
  height: 12px;
}

/* jemné zvýraznění bez “bloku” */
.scheduleItem.isBreak .scheduleNameTop{
  color: rgba(255,255,255,.78);
}

.scheduleItem.isHighlight .scheduleNameTop{
  color: rgba(124,92,255,.95);
}

.scheduleItem.isParty .scheduleNameTop{
  color: rgba(45,212,191,.92);
}
/* ====== PROGRAM – TIMELINE (levý návrh) ====== */
.scheduleWrap{
  margin: 26px auto 10px;
  max-width: 760px;
  text-align: center;
}

.scheduleTitle{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .4px;
}

.scheduleSub{
  margin-top: 6px;
  color: rgba(255,255,255,.75);
  font-weight: 700;
  letter-spacing: .25px;
}

/* timeline container */
.timeline{
  position: relative;
  margin: 18px auto 0;
  padding: 10px 0 8px;
}

/* vertical glowing line */
.timeline::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(124,92,255,.85),
    rgba(45,212,191,.55)
  );
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 22px rgba(124,92,255,.35),
    0 0 26px rgba(45,212,191,.22);
  opacity: .95;
}

/* each item */
.tlItem{
  position: relative;
  padding: 12px 10px 12px 58px;
  margin: 6px 0;
}

/* dot */
.tlDot{
  position:absolute;
  left: 8px;
  top: 18px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 6px rgba(124,92,255,.16),
    0 0 18px rgba(124,92,255,.25);
}

/* time + text */
.tlTime{
  font-weight: 900;
  letter-spacing: .3px;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}

.tlText{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}

/* spacing between blocks */
.tlBreak{ margin-top: 18px; }
.tlBreak .tlDot{
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.10),
    0 0 16px rgba(255,255,255,.10);
}

/* special highlights */
.tlHighlight .tlText{
  color: rgba(167,139,250,1); /* jemně do fialova */
}
.tlHighlight .tlDot{
  box-shadow:
    0 0 0 6px rgba(167,139,250,.18),
    0 0 18px rgba(167,139,250,.28);
}

.tlParty .tlText{
  color: rgba(45,212,191,1); /* tyrkys */
}
.tlParty .tlDot{
  box-shadow:
    0 0 0 6px rgba(45,212,191,.18),
    0 0 18px rgba(45,212,191,.25);
}

/* responsive */
@media (max-width: 720px){
  .scheduleWrap{ max-width: 92vw; }
  .scheduleTitle{ font-size: 24px; }
  .tlText{ font-size: 16px; }
  .timeline::before{ left: 14px; }
  .tlItem{ padding-left: 52px; }
  .tlDot{ left: 4px; }
}