/* Orange glass buttons + stainless steel panel headers (loaded last on every page) */

/* ---------- Home content panels: stainless steel raised header, stamped title ---------- */
.home .box > h3,
.home .box > .arrow-bar,
.club-site .box > h3,
.page-login .account-heading {
  position: relative; z-index: 2;
  margin: -14px -14px 14px !important;
  padding: 11px 14px;
  min-height: 62px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%, rgba(0,0,0,.12)), url('/assets/steel.jpg') center / cover;
  border-bottom: 1px solid rgba(40,44,48,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.25),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(0,0,0,.15),
    0 6px 10px -2px rgba(10,20,15,.38),
    0 2px 2px rgba(10,20,15,.25);
  transform: translateY(-2px);
}
.home .box > .arrow-bar { justify-content: space-between; }
.home .box > h3,
.home .box > .arrow-bar .arrow-title,
.club-site .box > h3,
.page-login .account-heading strong {
  font: 800 16px Outfit, sans-serif !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: #4f555b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(0,0,0,.55);
  text-align: center;
}
.home .room-game h4 { text-align: center; }
.home .box > h3 + * { position: relative; z-index: 1; }
.page-login .account-heading {
  justify-content: flex-start !important;
  margin: 0 -14px 16px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.page-login .account-panel { padding-left: 14px; padding-right: 14px; }

/* ---------- Metal 3D buttons for orange and green actions ---------- */
@keyframes glassShine {
  0%, 82% { left: -70%; opacity: 0; }
  84% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
body.club-site :is(
  button, input[type="submit"], input[type="button"],
  .club-btn:not(.account-toggle), .club-btn-solid, .account-toggle.signed-in, .gbtn, .pbtn, .btn-orange,
  .site-gold-button, .launch, .acts a, .tops-nav button, .nav-btn, .rect-btn, .rect-btn.green
):not(.theme-toggle):not(.account-toggle:not(.signed-in)):not(.x):not(#account-menu button):not(.tabs button):not(.hits button):not(.account-heading button):not(.room-tile):not(:disabled):not(.nav-btn):not(.menu-toggle):not(.search-go):not(.btn-circle):not(.arrow-btn):not(.carousel-btn):not(.small):not(#prev):not(#next):not(#tops-prev):not(#tops-next):not(#menu-toggle) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 0 !important;
  border-image: none !important;
  border-radius: 16px !important;
  color: #f6fff4 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(0,28,8,.85), 0 2px 1px rgba(0,20,6,.4) !important;
  letter-spacing: .03em !important;
  background:
    linear-gradient(180deg, #c6f5a4 0%, #8ee08a 24%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #6ed48e 0%, #2aa85c 42%, #146e38 100%) !important;
  box-shadow:
    inset 0 1px 0 #d4ffb0,
    inset 0 0 0 1px rgba(210,255,180,.45),
    inset 0 -2px 0 rgba(6,40,14,.32),
    inset 0 -8px 10px rgba(0,36,10,.16),
    0 0 0 1px #0c5c2c,
    0 5px 0 #084422,
    0 6px 0 1px rgba(4,22,8,.45),
    0 10px 14px rgba(4,24,8,.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transform: none;
  transition: transform .08s ease !important;
}
body.club-site :is(
  button, input[type="submit"], input[type="button"],
  .club-btn:not(.account-toggle), .club-btn-solid, .account-toggle.signed-in, .gbtn, .pbtn, .btn-orange,
  .site-gold-button, .launch, .acts a, .tops-nav button, .nav-btn, .rect-btn
):not(.theme-toggle):not(.account-toggle:not(.signed-in)):not(.x):not(#account-menu button):not(.tabs button):not(.hits button):not(.account-heading button):not(.room-tile):not(:disabled):not(.nav-btn):not(.menu-toggle):not(.search-go):not(.btn-circle):not(.arrow-btn):not(.carousel-btn):not(.small):not(#prev):not(#next):not(#tops-prev):not(#tops-next):not(#menu-toggle)::after {
  content: "" !important;
  position: absolute !important;
  top: -20% !important; left: -70%; width: 45% !important; height: 140% !important;
  background: linear-gradient(90deg, transparent, rgba(220,255,200,.28), transparent) !important;
  transform: skewX(-22deg) !important;
  pointer-events: none; z-index: 1;
  animation: glassShine 5s ease-in-out infinite !important;
  border: 0 !important; box-shadow: none !important;
}
body.club-site :is(
  button, .club-btn:not(.account-toggle), .club-btn-solid, .account-toggle.signed-in, .gbtn, .pbtn, .btn-orange,
  .site-gold-button, .launch, .acts a, .tops-nav button, .nav-btn, .rect-btn
):not(.theme-toggle):not(.account-toggle:not(.signed-in)):not(.x):not(#account-menu button):not(.tabs button):not(.hits button):not(.account-heading button):not(.room-tile):not(:disabled):not(.nav-btn):not(.menu-toggle):not(.search-go):not(.btn-circle):not(.arrow-btn):not(.carousel-btn):not(.small):not(#prev):not(#next):not(#tops-prev):not(#tops-next):not(#menu-toggle) > * {
  position: relative; z-index: 2; color: inherit !important;
}
body.club-site :is(
  button, input[type="submit"], input[type="button"],
  .club-btn:not(.account-toggle), .club-btn-solid, .account-toggle.signed-in, .gbtn, .pbtn, .btn-orange,
  .site-gold-button, .launch, .acts a, .tops-nav button, .nav-btn, .rect-btn
):not(.theme-toggle):not(.account-toggle:not(.signed-in)):not(.x):not(#account-menu button):not(.tabs button):not(.hits button):not(.account-heading button):not(.room-tile):not(:disabled):not(.nav-btn):not(.menu-toggle):not(.search-go):not(.btn-circle):not(.arrow-btn):not(.carousel-btn):not(.small):not(#prev):not(#next):not(#tops-prev):not(#tops-next):not(#menu-toggle):hover {
  border-image: none !important;
  background:
    linear-gradient(180deg, #d8ffb4 0%, #a4ee98 26%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #86e4a4 0%, #38bc6c 40%, #188044 100%) !important;
  color: #f6fff4 !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #e2ffc4,
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(6,40,14,.22),
    0 0 0 1px #147a3c,
    0 6px 0 #0c5c2e,
    0 7px 0 1px rgba(4,22,8,.4),
    0 12px 16px rgba(4,24,8,.24) !important;
}
body.club-site :is(
  button, input[type="submit"], input[type="button"],
  .club-btn:not(.account-toggle), .club-btn-solid, .account-toggle.signed-in, .gbtn, .pbtn, .btn-orange,
  .site-gold-button, .launch, .acts a, .tops-nav button, .nav-btn, .rect-btn
):not(.theme-toggle):not(.account-toggle:not(.signed-in)):not(.x):not(#account-menu button):not(.tabs button):not(.hits button):not(.account-heading button):not(.room-tile):not(:disabled):not(.nav-btn):not(.menu-toggle):not(.search-go):not(.btn-circle):not(.arrow-btn):not(.carousel-btn):not(.small):not(#prev):not(#next):not(#tops-prev):not(#tops-next):not(#menu-toggle):active {
  border-image: none !important;
  background:
    linear-gradient(180deg, rgba(180,230,160,.35) 0%, rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #1b8644 0%, #0c4e26 100%) !important;
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 4px 8px rgba(0,32,10,.5),
    inset 0 0 0 1px rgba(8,40,16,.45),
    0 0 0 1px #084422 !important;
}
/* Practice room tiles match the other room tiles */
.room-tile.practice, .room-tile.practice .ico {
  color: #163526 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(231,240,234,.55)) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 4px 10px rgba(14,36,25,.14), 0 1px 0 rgba(255,255,255,.8) inset !important;
  text-shadow: none !important;
}

/* Circle metal discs. 1137 rest, 1141 hover, 1142 pressed.
   Transparent outside the rim. No shift, so they stay in their slot. */
html body.club-site :is(
  button.nav-btn, button.menu-toggle, button.search-go, button.btn-circle,
  button.arrow, button.arrow-btn, button.carousel-btn, button.small,
  .tops-nav > button, .arrow-bar > button
):not(#metal-skip):not(#metal-skip-2) {
  background: transparent url("/assets/btn-circle.png?v=1146b") center / 100% 100% no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 18px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.5),
    inset 0 -1px 1px rgba(255,255,255,.28),
    0 0 0 2px #1a1c1e,
    0 0 0 4px #c5c9cc,
    0 0 0 5px rgba(30,34,38,.65) !important;
  color: #2a3036 !important;
  font: 800 16px/36px Outfit, Manrope, sans-serif !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 1px rgba(0,0,0,.45) !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  vertical-align: middle !important;
}
html body.club-site .arrow-bar,
html body.club-site .tops-nav,
html body.club-site .find-form,
html body.club-site .club-tools {
  overflow: visible !important;
}
html body.club-site .find-form { align-items: center !important; }
html body.club-site button.menu-toggle:not(#metal-skip):not(#metal-skip-2) {
  flex-direction: column !important;
  gap: 3px !important;
  line-height: 0 !important;
}
html body.club-site button.menu-toggle:not(#metal-skip):not(#metal-skip-2) span {
  display: block !important;
  width: 14px !important;
  height: 2px !important;
  margin: 0 !important;
  border-radius: 2px !important;
  background: #2a3036 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
  position: relative !important;
  z-index: 2 !important;
  transition: transform .2s, opacity .2s !important;
}
html body.club-site .menu-open button.menu-toggle:not(#metal-skip):not(#metal-skip-2) span:nth-child(1) { transform: translateY(5px) rotate(45deg) !important; }
html body.club-site .menu-open button.menu-toggle:not(#metal-skip):not(#metal-skip-2) span:nth-child(2) { opacity: 0 !important; }
html body.club-site .menu-open button.menu-toggle:not(#metal-skip):not(#metal-skip-2) span:nth-child(3) { transform: translateY(-5px) rotate(-45deg) !important; }
html body.club-site button.search-go:not(#metal-skip):not(#metal-skip-2) { font-size: 16px !important; line-height: 1 !important; }
html body.club-site :is(
  button.nav-btn, button.menu-toggle, button.search-go, button.btn-circle,
  button.arrow, button.arrow-btn, button.carousel-btn, button.small,
  .tops-nav > button, .arrow-bar > button
):not(#metal-skip):not(#metal-skip-2):hover {
  background: transparent url("/assets/btn-circle-hover.png?v=1148b") center / 100% 100% no-repeat !important;
  transform: none !important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.5),
    inset 0 -1px 1px rgba(255,255,255,.28),
    0 0 0 2px #1a1c1e,
    0 0 0 4px #d5d8db,
    0 0 0 5px rgba(30,34,38,.65) !important;
}
html body.club-site :is(
  button.nav-btn, button.menu-toggle, button.search-go, button.btn-circle,
  button.arrow, button.arrow-btn, button.carousel-btn, button.small,
  .tops-nav > button, .arrow-bar > button
):not(#metal-skip):not(#metal-skip-2):active {
  background: transparent url("/assets/btn-circle-down.png?v=1142e") center / 100% 100% no-repeat !important;
  transform: none !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.62),
    0 0 0 2px #141618,
    0 0 0 4px #b7bbbe,
    0 0 0 5px rgba(30,34,38,.7) !important;
}
.shop-page .profile-heading .logo-chrome { display: none !important; }
html body.club-site .playrow .gbtn,
html body.club-site .playrow .pbtn {
  gap: 0 !important;
}
/* Smaller rectangle bars. Dark gold stamp. Soft seat on white pages. */
html body.club-site :is(
  .gbtn, .pbtn, .club-btn:not(.search-go), .club-btn-solid, .rect-btn,
  .launch, .site-gold-button, .acts a
) {
  padding: 2px 8px !important;
  min-height: 36px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #f6fff4 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(0,28,8,.85), 0 2px 1px rgba(0,20,6,.4) !important;
  box-shadow: none;
  background-color: transparent;
}
@media (max-width: 720px) {
  html body.club-site #site-shell.menu-open .club-nav {
    gap: 6px !important;
  }
  html body.club-site #site-shell.menu-open .club-nav a,
  html body.club-site #site-shell.menu-open .practice-menu summary {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
}