/* Demo Mode: DEMO DATA/DEMO COURSE DATA badges, Try/Exit Demo controls, the
   7-iron entry form, and the "Press me" pulse/callout on Adopt and Play.
   Visual language matches gd-manual-practice.css (dark, subtle borders,
   heavy weight small labels) so this reads as the product, not an overlay. */

/* Every rule below that sets `display` with !important would otherwise beat
   the UA stylesheet's [hidden]{display:none}, since attribute selectors and
   class selectors have equal specificity and !important only breaks the tie
   by source order. Stated first and un-overridden anywhere else in this
   file, so [hidden] always wins regardless of edit order below. */
.gdDemoBadge[hidden],
#gdGpsDemoBadge[hidden],
.gdDemoCourseDataBadge[hidden],
.gdDemoEntryForm[hidden],
#gdDemoCourseDataCta[hidden]{
  display:none!important;
}

.gdPracticeTopRail{
  display:flex!important;
  justify-content:flex-end!important;
  padding:0 0 10px!important;
}
#practiceDataPanel.open .gdPracticePlayBtn{
  display:grid!important;
  gap:2px!important;
  text-align:left!important;
  padding:8px 22px!important;
  border-radius:999px!important;
  background:rgba(70,190,120,.16)!important;
  border:1px solid rgba(70,190,120,.4)!important;
  color:#7de3a0!important;
  font-size:13px!important;
  font-weight:900!important;
}
#practiceDataPanel.open .gdPracticePlayBtn strong{font-size:13px!important;line-height:1.1!important}
#practiceDataPanel.open .gdPracticePlayBtn span{font-size:10px!important;font-weight:750!important;opacity:.72!important}

.gdPracticeBubblePreviewBanner{
  position:relative;
  z-index:35;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 10px 0;
  padding:10px 12px;
  border:1px solid rgba(255,176,32,.48);
  border-radius:12px;
  background:rgba(21,18,8,.92);
  color:#fff2c8;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.gdPracticeBubblePreviewBanner div{display:grid;gap:2px;min-width:0}
.gdPracticeBubblePreviewBanner strong{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.gdPracticeBubblePreviewBanner span{font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.72)}
.gdPracticeBubblePreviewBanner button{
  flex:none;
  padding:8px 10px;
  border:1px solid rgba(255,176,32,.55);
  border-radius:999px;
  background:#ffb020;
  color:#171005;
  font-size:11px;
  font-weight:900;
}

.gdDemoBadge,
#gdGpsDemoBadge,
.gdDemoCourseDataBadge{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  background:rgba(255,176,32,.16)!important;
  border:1px solid rgba(255,176,32,.5)!important;
  color:#ffb020!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  width:fit-content!important;
}
#practiceDataPanel.open .gdPracticeVisualStack .gdDemoBadge{margin:2px 0 6px!important}

#gdGpsDemoBadge{
  position:fixed!important;
  top:calc(env(safe-area-inset-top,0px) + 10px)!important;
  right:10px!important;
  z-index:40!important;
}

.gdDemoEntryForm{
  display:grid!important;
  gap:10px!important;
  padding:12px!important;
  margin-top:10px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}
.gdDemoEntryForm label{
  display:grid!important;
  gap:6px!important;
  color:rgba(255,255,255,.78)!important;
  font-size:12px!important;
  font-weight:820!important;
}
.gdDemoEntryForm input{
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(0,0,0,.25)!important;
  color:#fff!important;
  padding:8px 10px!important;
  font-size:14px!important;
}
.gdDemoEntryButtons{
  display:flex!important;
  gap:8px!important;
}

/* Pulse/callout: restrained, respects prefers-reduced-motion, never covers
   the button it points at. */
.gdDemoCalloutAnchor{position:relative!important}
.gdDemoCallout{
  position:absolute!important;
  top:-26px!important;
  right:0!important;
  padding:3px 9px!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#111!important;
  font-size:11px!important;
  font-weight:950!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
.gdDemoCallout::after{
  content:"";
  position:absolute;
  bottom:-4px;
  right:14px;
  width:8px;
  height:8px;
  background:#fff;
  transform:rotate(45deg);
}

@keyframes gdDemoPulseKeyframes{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(70,190,120,.5)}
  50%{transform:scale(1.045);box-shadow:0 0 0 6px rgba(70,190,120,0)}
}
.gdDemoPulse{
  animation:gdDemoPulseKeyframes 1.6s ease-in-out infinite!important;
}
@media (prefers-reduced-motion: reduce){
  .gdDemoPulse{animation:none!important}
}

#gdDemoCourseDataCta{
  position:fixed!important;
  left:50%!important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important;
  transform:translateX(-50%)!important;
  z-index:45!important;
  padding:12px 20px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  background:#111!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  box-shadow:0 6px 24px rgba(0,0,0,.35)!important;
}