/* Material adapted from note-n-do's glass surfaces and floating header. */
:root {
  --accent: var(--brand-accent, #a991ff);
  --gold: var(--brand-accent, #a991ff);
  --lilac: var(--brand-from, #a991ff);
  --glass-blue: var(--brand-to, #74ceff);
  --glass-fill: rgb(25 28 39 / 46%);
  --glass-edge: #ffffff28;
  --glass-border: #ffffff1f;
  --glass-surface: linear-gradient(115deg, #ffffff15, #ffffff03 46%, #b3ceff08), var(--glass-fill);
  --glass-depth: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #ffffff06, 0 12px 32px #00000020;
}

body .hn-header {
  background: linear-gradient(115deg, #ffffff18, #ffffff03 48%, #9b90ff0c), rgb(25 27 36 / 48%);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-depth);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

body :is(.card, .surface, .tour-tab, .engine-panel, .purchase-card,
.pricing-spotlight, .catalog-card, :where(.steps li), :where(.faq-list details),
.pn-library-illustration, .pn-download-card, .pn-review, .search-preview),
body.site-glass .site-main :is(.card, .surface) {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-depth);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

:is(.experience, .engine-section, .catalog-section) {
  position: relative;
  isolation: isolate;
}

:is(.experience, .engine-section, .catalog-section)::before {
  content: '';
  position: absolute;
  inset: -35px -20px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 15% 45%, #607bdd18, transparent 55%),
    radial-gradient(ellipse at 88% 60%, #ef456518, transparent 53%);
}

.engine-section::before { inset-inline: 0; }

body.site-glass .site-main {
  background: radial-gradient(ellipse 60% 450px at 10% 800px, #648bf31a, transparent),
    radial-gradient(ellipse 55% 650px at 95% 1150px, #ef45651a, transparent);
}

body :is(.tour-tab, .catalog-card, .pn-review):hover {
  background: linear-gradient(115deg, #ffffff1c, #ffffff08 48%, #a4cfff0c), rgb(27 29 40 / 52%);
  border-color: #ffffff4d;
  box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #ffffff0d, 0 18px 42px #00000035;
}

body .tour-tab.active,
body .engine-tabs button[aria-selected=true] {
  background: linear-gradient(115deg, #ffffff1e, #ef456510 70%), rgb(27 29 40 / 50%);
  border-color: #ff839b40;
  box-shadow: var(--glass-depth);
}

body :is(.search-input-wrap, .catalog-search, .glass-select-toggle,
.engine-tabs button, .carousel-navigation button, .button-secondary, .button-outline) {
  background: var(--glass-surface);
  border-color: #ffffff30;
  box-shadow: inset 0 1px 0 #ffffff3c, inset 0 -1px 0 #ffffff08, 0 6px 22px #00000020;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

body .catalog-controls .catalog-search input {
  background: var(--glass-surface);
  border-color: #ffffff30;
  box-shadow: inset 0 1px 0 #ffffff3c;
}

body :is(.hn-dropdown, .hn-mobile-panel, .search-results, .glass-options, .game-dialog) {
  background: linear-gradient(115deg, #ffffff18, #ffffff04 55%, #aacfff0b), rgb(25 27 37 / 82%);
  border-color: #ffffff40;
  box-shadow: inset 0 1px 0 #ffffff65, inset 0 -1px 0 #ffffff0a, 0 25px 65px #00000055;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

body .search-input-wrap:focus-within,
body .catalog-search:focus-within,
body .glass-select-toggle[aria-expanded=true] {
  border-color: #9bcfff80;
  box-shadow: inset 0 1px 0 #ffffff65, 0 0 0 3px #9bcfff12;
}

body :is(.btn, .button, .purchase-cta),
body .hn-header .hn-buy,
body .hero-actions .btn {
  background: linear-gradient(115deg, color-mix(in srgb, var(--brand-from, #a991ff) 90%, white), var(--brand-to, #74ceff));
  border-color: #ffb0bf30;
  box-shadow: inset 0 1px 0 #ffffff25, inset 0 -1px 0 #9b143e30, 0 6px 22px #e9244514;
  color: #fff;
  border-radius: 12px;
  transition: transform .25s, box-shadow .25s, filter .25s;
}
body :is(.btn, .button, .purchase-cta):hover,
body .hn-header .hn-buy:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 #ffffff35, 0 9px 30px #e9244520;
  color: #fff;
}

body :is(.button-secondary, .button-outline, .btn-ghost) {
  background: var(--glass-surface);
  border-color: #ffffff30;
  color: #e4e7ef;
  box-shadow: var(--glass-depth);
}

.heading-accent, body.site-glass .site-main .gtext {
  color: var(--brand-from, #a991ff);
  background: var(--brand-gradient, linear-gradient(115deg, #a991ff, #74ceff));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body :is(.engine-chip, .game-detail-engine, .chip) {
  background: linear-gradient(115deg, #ffffff12, #9bcfff0d), rgb(26 28 38 / 40%);
  border-color: #9bcfff35;
  box-shadow: inset 0 1px 0 #ffffff40;
  color: var(--glass-blue);
}