/* Support keeps its native FAQ and contact actions within the storefront theme. */
body.support-route {
  --support-width: 1600px;
  --support-gutter: 80px;
  --support-bg: #101014;
  --support-surface: #18181f;
  --support-line: #34343e;
  --support-text: #f1f1f5;
  --support-muted: #b1b1c0;
  --support-accent: #65d8f2;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--support-text);
  background: var(--support-bg);
}
.support-route .screen-red-streaks { display: none; }
.support-route [hidden] { display: none !important; }
.support-route .header-tools .search-box { display: none !important; }
.support-route :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #87dff8; outline-offset: 3px; }
.support-route .support-page { width: min(var(--support-width), calc(100% - var(--support-gutter))); min-width: 0; padding: 28px 0 48px; }
.support-route .support-page :is(section, article, form, input, textarea) { min-width: 0; }
.support-route :is(#receive-game, #missing-key, #refund, #activate-steam, #support-contact, #faq-title, #ticket-title) { scroll-margin-top: 88px; }

.support-route .support-hero { padding: 24px 28px; overflow: visible; border: 1px solid #30303a; border-radius: 10px; background: #18181c; box-shadow: none; text-align: left; }
.support-route .support-hero::before, .support-route .support-hero::after { display: none; }
.support-route .support-kicker { margin: 0 0 6px; color: #65d8f2; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .09em; }
.support-route .support-hero h1 { max-width: 30ch; margin: 0; color: #f5f5f8; font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.5px; text-transform: none; overflow-wrap: anywhere; }
.support-route .support-hero > p:not(.support-kicker) { max-width: 72ch; margin: 10px 0 18px; color: #b8b8c6; font-size: 16px; line-height: 1.5; }
.support-route .support-search { display: flex; align-items: center; gap: 10px; width: min(100%, 680px); height: auto; min-height: 52px; margin: 0; padding: 4px 4px 4px 14px; border: 1px solid #454552; border-radius: 8px; background: #111118; box-shadow: none; transition: none; }
.support-route .support-search:focus-within { border-color: #75cce0; box-shadow: none; }
.support-route .support-search > svg { flex: 0 0 21px; width: 21px; height: 21px; color: #a9a9b9; }
.support-route .support-search input { flex: 1 1 0; width: 100%; min-width: 0; min-height: 42px; padding: 8px 0; border: 0; background: transparent; color: #f0f0f6; font: inherit; font-size: 16px; line-height: 1.5; }
.support-route .support-search input::placeholder { color: #9696a8; opacity: 1; }
.support-route .support-search button { flex: 0 0 auto; height: auto; min-height: 44px; padding: 10px 18px; border: 1px solid #5bd1f0; border-radius: 6px; background: #22b9ed; color: #0d1820; font: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; text-transform: none; cursor: pointer; transition: none; }
.support-route .support-search button:hover { border-color: #a0ebff; background: #65d7f6; filter: none; transform: none; }
.support-route .support-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 12px; }
.support-route .support-quick-links > a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #bceaf5; font-size: 14px; line-height: 1.5; }
.support-route .support-quick-links > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.support-route .support-faq-status { margin: 12px 0 0; color: #b6b6c5; font-size: 14px; line-height: 1.6; }
.support-route .support-hero > .support-faq-status { margin: 12px 0 0; color: #b6b6c5; font-size: 14px; }
.support-route .support-faq-status:empty { display: none; }

.support-route .support-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-width: 0; margin-top: 24px; scroll-margin-top: 88px; }
.support-route .support-contact-card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; min-height: 128px; padding: 20px; border: 1px solid #34343e; border-radius: 9px; background: #18181f; box-shadow: none; transition: none; }
.support-route .support-contact-card:hover { border-color: #656575; box-shadow: none; transform: none; }
.support-route .support-contact-card > div { flex: 1 1 0; min-width: 0; }
.support-route .support-contact-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #3b4651; border-radius: 8px; background: #20242d; color: #6dddf8; }
.support-route .support-contact-icon svg { width: 23px; height: 23px; }
.support-route .support-contact-card h2 { margin: 1px 0 5px; color: #f0f0f6; font-size: 17px; font-weight: 650; line-height: 1.4; }
.support-route .support-contact-card p { min-height: 0; margin: 0 0 5px; color: #b2b2c1; font-size: 14px; line-height: 1.6; }
.support-route .support-contact-card :is(a, button) { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: #65d8f2; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.support-route .support-contact-card :is(a, button) > span { flex: 0 0 auto; margin: 0; color: inherit; font-size: 18px; }
.support-route .support-contact-card :is(a, button):hover { color: #b4f3ff; text-decoration: underline; text-underline-offset: 4px; }

.support-route .support-content { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 24px; min-width: 0; margin-top: 28px; }
.support-route .support-faq, .support-route .support-ticket { min-width: 0; padding: 24px; border: 1px solid #34343e; border-radius: 9px; background: #18181f; box-shadow: none; }
.support-route .support-section-heading p { margin: 0 0 5px; color: #a6b2c0; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; }
.support-route .support-section-heading h2 { margin: 0; color: #f0f0f6; font-size: 23px; font-weight: 650; line-height: 1.35; letter-spacing: -.25px; text-transform: none; overflow-wrap: anywhere; }
.support-route .faq-list { margin-top: 18px; }
.support-route .faq-list details { border-bottom: 1px solid #34343e; scroll-margin-top: 88px; }
.support-route .faq-list details:first-child { border-top: 1px solid #34343e; }
.support-route .faq-list details:target { border-color: #4daec4; }
.support-route .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; color: #e4e4ed; font-size: 15px; font-weight: 600; line-height: 1.5; list-style: none; }
.support-route .faq-list summary::-webkit-details-marker { display: none; }
.support-route .faq-list summary > span { display: grid; place-items: center; flex: 0 0 20px; width: 20px; min-height: 28px; margin: 0; color: #6dddf8; font-size: 24px; line-height: 1; transition: none; }
.support-route .faq-list details[open] summary > span { transform: rotate(45deg); }
.support-route .faq-list details p { margin: 0 28px 18px 0; color: #b6b6c4; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.support-route .faq-list details a { color: #8ce0f3; text-decoration: underline; text-underline-offset: 3px; }
.support-route .support-faq-empty { margin-top: 18px; padding: 20px; border: 1px solid #444450; border-radius: 8px; background: #22222a; }
.support-route .support-faq-empty h3 { margin: 0; color: #f0f0f7; font-size: 18px; line-height: 1.4; }
.support-route .support-faq-empty p { margin: 8px 0 0; color: #b7b7c6; font-size: 14px; line-height: 1.7; }
.support-route .support-faq-empty button { min-height: 44px; margin-top: 12px; padding: 10px 16px; border: 1px solid #626271; border-radius: 6px; background: #2d2d37; color: #f0f0f7; font: inherit; font-size: 14px; cursor: pointer; }
.support-route .support-faq-empty button:hover { border-color: #87dff8; background: #383843; }
.support-route .support-contact-panel > p { margin: 14px 0 0; color: #b6b6c4; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.support-route .support-contact-steps { margin: 16px 0 0; padding-left: 22px; color: #b9b9c7; font-size: 14px; line-height: 1.7; }
.support-route .support-contact-steps > li + li { margin-top: 8px; }
.support-route .support-contact-steps > li::marker { color: #6ddcf5; font-weight: 650; }
.support-route .support-email-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 20px; padding: 12px 18px; border: 1px solid #5bd1f0; border-radius: 7px; background: #22b9ed; color: #0d1820; font-size: 15px; font-weight: 650; line-height: 1.4; }
.support-route .support-email-cta:hover { border-color: #b2f1ff; background: #7de2f7; }
.support-route .support-contact-panel > .support-contact-note { margin-top: 12px; color: #a5a5b5; font-size: 14px; }
.support-route .support-account-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #353540; }
.support-route .support-account-links > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #7cdcf3; font-size: 14px; line-height: 1.5; }
.support-route .support-account-links > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.support-route .site-footer { padding-top: 28px; border-top: 1px solid #2c2c35; background: #101014; color: #e9e9f1; }
.support-route .site-footer .footer-grid, .support-route .site-footer .copyright { width: min(var(--support-width), calc(100% - var(--support-gutter))); }
.support-route .footer-wordmark { color: #f0f0f6; font-style: normal; font-weight: 800; }
.support-route .footer-wordmark > span { color: inherit; }
.support-route .footer-tagline, .support-route .footer-brand > p { color: #aaaaba; }
.support-route .footer-support { border-color: #34343e; background: #18181f; }
.support-route .footer-support:hover { border-color: #5b7281; background: #202029; }
.support-route .footer-support-icon, .support-route .footer-support-copy > span { color: #65d8f2; }
.support-route .footer-column :is(a, .footer-link-unavailable) { min-height: 44px; color: #b5b5c2; }
.support-route .footer-column a:hover { color: #87e3f8; }
.support-route .site-footer .social-list > :is(a, .footer-social-icon) { border-color: #41414c; background: #18181f; color: #d2d2de; }
.support-route .site-footer .social-list a:hover { border-color: #83d3e6; background: #24242e; color: #87e3f8; }
.support-route .site-footer .footer-bank, .support-route .site-footer .payment-list > span { border-color: #34343e; background: #18181f; color: #c8c8d6; }
.support-route .site-footer .copyright { border-color: #34343e; color: #a7a7b7; }
.support-route .footer-back-to-top { min-height: 44px; color: #c1c1cf; }
.support-route .footer-top-icon { border-color: #41414c; background: #18181f; }
.support-route .footer-back-to-top:hover { color: #87e3f8; }
.support-route .footer-back-to-top:hover .footer-top-icon { border-color: #83d3e6; }

@media (max-width: 1023px) {
  body.support-route { --support-gutter: 48px; }
  .support-route .support-page { padding-top: 24px; }
  .support-route .support-content { grid-template-columns: minmax(0, 1fr); }
  .support-route .support-contact-card { flex-direction: column; gap: 10px; padding: 18px; }
  .support-route .support-contact-card > div { flex: 0 0 auto; width: 100%; }
  .support-route .site-header { height: 64px; min-height: 64px; border-bottom-color: #2c2c35; background: #18181c; box-shadow: none; backdrop-filter: none; }
  .support-route .header-inner { display: flex; align-items: center; gap: 12px; width: calc(100% - var(--support-gutter)); height: 64px; }
  .support-route .site-header .header-brand { position: static; display: flex; flex: 1 1 auto; align-self: center; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; height: auto; margin: 0; }
  .support-route .brand-logo { position: static; flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; transform: none; filter: none; }
  .support-route .home-brand-wordmark { display: block; min-width: 0; color: #f0f0f6; font-size: 18px; font-weight: 800; font-style: normal; line-height: 1.1; letter-spacing: -.5px; white-space: nowrap; }
  .support-route .home-brand-wordmark > span { color: inherit; }
  .support-route .header-tools { position: static; display: flex; flex: 0 0 auto; order: 1; align-items: center; gap: 2px; margin: 0; transform: none; }
  .support-route .home-header-search, .support-route .header-tools .round-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #ededf4; box-shadow: none; }
  .support-route .header-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .support-route .main-nav { border-color: #34343e; background: #18181f; box-shadow: none; }
  .support-route .main-nav a { color: #b8b8c5; font-size: 14px; text-transform: none; }
  .support-route .main-nav a.active, .support-route .main-nav a:hover { color: #7ae0f7; }
  .support-route .main-nav a::after { background: #65d8f2; box-shadow: none; }
  .support-route .home-header-search:hover, .support-route .header-tools .round-button:hover { border-color: #83d3e6; background: #25252e; color: #87e3f8; transform: none; }
  .support-route .search-box { border-color: #444450; background: #22222a; box-shadow: none; }
  .support-route .search-box:focus-within { border-color: #75cce0; box-shadow: none; }
}
@media (max-width: 900px) {
  .support-route .header-inner { gap: 6px; }
  .support-route .mobile-menu-toggle { position: static; display: block; flex: 0 0 44px; order: 2; width: 44px; height: 44px; margin: 0; padding: 9px; border: 1px solid #3b3b47; border-radius: 7px; }
  .support-route .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; height: auto; max-height: calc(100dvh - 88px); padding: 8px; overflow-y: auto; border: 1px solid #34343e; border-radius: 0 0 8px 8px; }
  .support-route .main-nav.open { display: flex; }
  .support-route .main-nav a { min-height: 46px; height: auto; padding: 10px 12px; border-radius: 6px; }
  .support-route .main-nav a.active { background: #24242c; }
  .support-route .main-nav a::after { display: none; }
}
@media (max-width: 767px) {
  body.support-route { --support-gutter: 24px; }
  .support-route .support-page { padding: 20px 0 32px; }
  .support-route .support-hero { padding: 20px 18px; border-radius: 8px; }
  .support-route .support-hero h1 { font-size: 28px; line-height: 1.25; }
  .support-route .support-hero > p:not(.support-kicker) { font-size: 15px; line-height: 1.6; }
  .support-route .support-search { gap: 8px; padding-left: 10px; }
  .support-route .support-search > svg { flex-basis: 20px; width: 20px; height: 20px; }
  .support-route .support-search button { padding-inline: 12px; }
  .support-route .support-quick-links { gap: 0 16px; margin-top: 10px; }
  .support-route .support-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
  .support-route .support-contact-card { flex-direction: row; gap: 14px; min-height: 0; padding: 16px; }
  .support-route .support-contact-card > div { flex: 1 1 0; width: auto; }
  .support-route .support-content { gap: 18px; margin-top: 20px; }
  .support-route .support-faq, .support-route .support-ticket { padding: 20px 16px; border-radius: 8px; }
  .support-route .support-section-heading h2 { font-size: 22px; }
  .support-route .faq-list { margin-top: 16px; }
  .support-route .faq-list summary { gap: 12px; min-height: 56px; }
  .support-route .faq-list details p { margin-right: 0; }
  .support-route .support-email-cta { width: 100%; padding-inline: 12px; }
  .support-route .support-faq-empty { padding: 18px 14px; }
  .support-route .site-footer { padding-top: 24px; }
  .support-route .footer-connect { border-color: #34343e; }
}
@media (max-width: 350px) {
  .support-route .site-header .header-brand { gap: 5px; }
  .support-route .home-brand-wordmark { width: 60px; font-size: 14px; line-height: 1.1; letter-spacing: 0; white-space: normal; }
  .support-route .home-brand-wordmark > span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .support-route .support-page *, .support-route .support-page *::before, .support-route .support-page *::after { transition: none; }
}