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

body {
  overflow: hidden;
}

.demo-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 6px;
  overflow: hidden;
}

.demo-root {
  width: min(1120px, 100%);
  max-width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 8px;
  padding-right: 2px;
}

.guide-top {
  position: relative;
  z-index: 120;
  width: min(980px, 96vw);
  border-radius: 14px;
}

#guideTitle {
  font-size: 1.2rem;
  line-height: 1.2;
}

#guideText {
  font-size: 0.98rem;
  font-weight: 700;
  color: rgba(12, 15, 20, 0.95) !important;
  border: 1px solid rgba(37, 99, 235, 0.26);
  background: linear-gradient(135deg, rgba(106, 169, 255, 0.2), rgba(37, 99, 235, 0.12));
  border-radius: 12px;
  padding: 0.56rem 0.72rem;
  box-shadow: 0 0 0 2px rgba(106, 169, 255, 0.18);
}

#guideCounter {
  font-size: 0.9rem;
  padding: 0.36rem 0.82rem;
}

.guide-nav-row .btn {
  font-weight: 700;
}

#guideNext {
  min-width: 176px;
  font-size: 0.9rem;
  color: #ffffff;
  background: linear-gradient(135deg, #6aa9ff, #2563eb);
  border: 2px solid rgba(191, 219, 254, 0.9);
  padding: 0.45rem 0.88rem;
  box-shadow:
    0 0 0 2px rgba(106, 169, 255, 0.35),
    0 12px 24px rgba(13, 110, 253, 0.32);
}

#guideNext:hover {
  background: linear-gradient(135deg, #7cb5ff, #2d6bf1);
}

#guideNext:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(147, 197, 253, 0.9),
    0 12px 24px rgba(13, 110, 253, 0.38);
}

.guide-next-help {
  font-weight: 500;
  font-size: 0.84rem;
  color: rgba(12, 15, 20, 0.58);
}

.guide-auto-click {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 0 0 2px rgba(106, 169, 255, 0.45),
    0 8px 16px rgba(13, 110, 253, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.guide-focus {
  position: relative !important;
  z-index: 60 !important;
  border-radius: 12px;
  transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.guide-focus-main {
  box-shadow:
    0 0 0 9999px rgba(3, 8, 19, 0.42),
    0 0 0 3px rgba(106, 169, 255, 0.96),
    0 18px 34px rgba(3, 8, 19, 0.42);
}

.guide-focus-alt {
  box-shadow:
    0 0 0 3px rgba(106, 169, 255, 0.96),
    0 10px 20px rgba(13, 110, 253, 0.28);
  transform: translateY(-1px);
}

.guide-focus#groups,
.guide-focus#teamPool,
.guide-focus#drawFormatPanel,
.guide-focus#drawBoardPanel {
  border-radius: 14px;
}

.status-line {
  margin-bottom: 12px;
}

.pool-item.guide-focus,
.slot.guide-focus {
  border-radius: 10px;
}

.team-pool {
  max-height: 480px;
}

@media (max-width: 768px) {
  .guide-top {
    width: 100%;
    padding: 0.65rem 0.72rem !important;
  }

  #guideTitle {
    font-size: 0.94rem;
  }

  #guideText {
    margin-top: 0.45rem !important;
    font-size: 0.8rem;
    line-height: 1.35;
    padding: 0.4rem 0.52rem;
  }

  .guide-next-help {
    margin-top: 0.35rem !important;
    font-size: 0.72rem;
  }

  .guide-nav-row {
    margin-top: 0.5rem !important;
    gap: 0.4rem !important;
    flex-direction: column;
  }

  .guide-nav-row .btn {
    width: 100%;
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
  }

  #guideNext {
    min-width: 0;
    font-size: 0.8rem;
  }

  #guideCounter {
    font-size: 0.78rem;
    padding: 0.28rem 0.6rem;
  }
}