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(1100px, 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);
  backdrop-filter: blur(6px);
  border-radius: 14px;
}

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

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

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

.guide-focus {
  position: relative !important;
  z-index: 40 !important;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(3, 8, 19, 0.7),
    0 0 0 3px rgba(106, 169, 255, 0.9),
    0 18px 34px rgba(3, 8, 19, 0.45);
  transition: box-shadow 0.25s ease;
}

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

#guideNext {
  min-width: 190px;
  font-size: 0.92rem;
  color: #ffffff;
  background: linear-gradient(135deg, #6aa9ff, #2563eb);
  border: 2px solid rgba(191, 219, 254, 0.9);
  padding: 0.48rem 0.92rem;
  box-shadow:
    0 0 0 2px rgba(106, 169, 255, 0.36),
    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(255, 255, 255, 0.62) !important;
}

.guide-focus#penShootoutPanel,
.guide-focus#goalFlagsRow {
  border-radius: 14px;
}

.goal-flags {
  border: 1px solid rgba(255, 255, 255, 0.16);
}

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

  #guideTitle {
    font-size: 0.96rem;
  }

  #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;
  }
}