body.hh-inner-page {
  --hh-ink: #f7fbf8;
  --hh-muted: #b8c8bd;
  --hh-panel: rgba(255,255,255,.055);
  --hh-line: rgba(255,255,255,.11);
  --hh-green: #25bd66;
  --hh-yellow: #ffd43b;
  background: #07160d !important;
}

body.hh-inner-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% -5%, rgba(36,187,99,.2), transparent 31rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, #0c2b19, #07160d 72%);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.hh-inner-page #root > div:not(.hh-home) {
  background: transparent !important;
  color: var(--hh-ink);
}

.hh-inner-page #root > div:not(.hh-home) > header {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(7,22,13,.9) !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.12);
}

.hh-inner-page #root > div:not(.hh-home) > header > div {
  max-width: 1180px !important;
  min-height: 72px;
}

.hh-inner-page #root > div:not(.hh-home) > header img { width: auto; height: 48px !important; }
.hh-inner-page #root > div:not(.hh-home) > header a { font-weight: 750; text-decoration: none; }
.hh-inner-page #root > div:not(.hh-home) > header nav a { color: #c9d6cd !important; }
.hh-inner-page #root > div:not(.hh-home) > header nav a:hover { color: #fff !important; }

.hh-inner-page main { flex: 1; }
.hh-inner-page main > div { width: min(100% - 32px, 1120px) !important; max-width: 1120px !important; padding-top: 52px !important; padding-bottom: 82px !important; }

.hh-page-intro {
  position: relative;
  overflow: hidden;
  margin: 0 0 34px;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: linear-gradient(125deg, rgba(32,112,60,.52), rgba(7,22,13,.78));
  box-shadow: 0 30px 70px rgba(0,0,0,.2);
}

.hh-page-intro::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  top: -120px;
  border-radius: 50%;
  background: rgba(255,212,59,.12);
  filter: blur(2px);
}

.hh-page-intro h1 { position: relative; z-index: 1; margin: 0 0 12px !important; font-size: clamp(2.45rem, 6vw, 4.8rem) !important; line-height: .98 !important; letter-spacing: -.05em; }
.hh-page-intro p { position: relative; z-index: 1; max-width: 720px; margin: 0 !important; color: #cfdbd2 !important; font-size: 1.06rem; line-height: 1.7; }
.hh-page-intro > div { position: relative; z-index: 1; margin-top: 19px; }

.hh-inner-page:not(.hh-route-mgmt-hub) form,
.hh-inner-page [data-state="closed"],
.hh-inner-page [data-state="open"],
.hh-inner-page main section,
.hh-inner-page main article {
  border-color: var(--hh-line) !important;
}

.hh-inner-page:not(.hh-route-mgmt-hub) form {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--hh-line);
  border-radius: 22px;
  background: rgba(5,18,10,.62);
  box-shadow: 0 24px 58px rgba(0,0,0,.18);
}

.hh-inner-page:not(.hh-route-mgmt-hub) input:not([type="file"]),
.hh-inner-page:not(.hh-route-mgmt-hub) textarea,
.hh-inner-page:not(.hh-route-mgmt-hub) select {
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: #f7faf8 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
  font-size: 1rem !important;
}

.hh-inner-page:not(.hh-route-mgmt-hub) textarea { padding-top: 14px !important; }
.hh-inner-page:not(.hh-route-mgmt-hub) input:focus, .hh-inner-page:not(.hh-route-mgmt-hub) textarea:focus, .hh-inner-page:not(.hh-route-mgmt-hub) select:focus { outline: 3px solid rgba(255,212,59,.28) !important; border-color: var(--hh-yellow) !important; }

.hh-inner-page:not(.hh-route-mgmt-hub) form button[type="submit"],
.hh-inner-page:not(.hh-route-mgmt-hub) form > button:last-child {
  min-height: 54px;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #2ac96c, #14934a) !important;
  box-shadow: 0 12px 28px rgba(17,139,70,.28);
  font-size: 1rem;
  font-weight: 850 !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hh-inner-page:not(.hh-route-mgmt-hub) form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(17,139,70,.36); }

.hh-inner-page:not(.hh-route-mgmt-hub) input[type="file"] { width: 100%; border-radius: 14px; background: rgba(36,187,99,.08); }

.hh-apple-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 11px 20px !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 13px !important;
  background: #030504 !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  text-decoration: none !important;
}
.hh-apple-icon { width: 21px; height: 27px; flex: 0 0 auto; }

.hh-route-faq main button[aria-expanded] {
  min-height: 66px;
  padding: 17px 20px !important;
  border: 1px solid var(--hh-line);
  border-radius: 15px;
  background: rgba(255,255,255,.05);
  font-size: 1.02rem;
}
.hh-route-faq main h3 { margin: 10px 0 !important; }
.hh-route-faq main button[aria-expanded="true"] { border-color: rgba(255,212,59,.36); background: rgba(255,212,59,.075); }

.hh-route-how-to-play main [id] {
  scroll-margin-top: 95px;
}
.hh-route-how-to-play main > div > div:not(.hh-page-intro),
.hh-route-how-to-play main > div > section {
  border-radius: 20px;
}
.hh-route-how-to-play table { overflow: hidden; border-radius: 14px; background: rgba(0,0,0,.18); }
.hh-route-how-to-play th { background: rgba(36,187,99,.13); color: var(--hh-yellow); }

.hh-route-privacy main > div,
.hh-route-terms main > div { max-width: 940px !important; }
.hh-route-privacy main h2,
.hh-route-terms main h2 { margin-top: 2.3em; padding-top: .75em; border-top: 1px solid rgba(255,255,255,.1); font-size: 1.55rem; letter-spacing: -.02em; }
.hh-route-privacy main h3,
.hh-route-terms main h3 { color: #dff8e7; }
.hh-route-privacy main p,
.hh-route-terms main p,
.hh-route-privacy main li,
.hh-route-terms main li { color: #c2d0c6; line-height: 1.75; }

.hh-route-mgmt-hub #root > div { background: linear-gradient(145deg,#07160d,#0d2d1a) !important; }
.hh-route-mgmt-hub #root > div > div { border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.045); box-shadow: 0 30px 80px rgba(0,0,0,.3); }

.hh-inner-page footer { border-top: 1px solid rgba(255,255,255,.08) !important; background: rgba(4,15,8,.62); }

@media (max-width: 700px) {
  .hh-inner-page main > div { width: min(100% - 24px, 1120px) !important; padding-top: 28px !important; }
  .hh-page-intro { border-radius: 20px; padding: 28px 22px; }
  .hh-page-intro h1 { font-size: clamp(2.3rem, 13vw, 3.5rem) !important; }
  .hh-inner-page form { padding: 19px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-inner-page *, .hh-inner-page *::before, .hh-inner-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
