/* The approved Mini App components remain the source of the website design. */
html[data-website="true"] body { min-width: 320px; }
html[data-website="true"] .website-account { margin-left: auto; border: 1px solid #693039; border-radius: 10px; padding: 10px 16px; background: #2d131b; color: #fff; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
html[data-website="true"] .website-account:hover { background: #571b29; }
html[data-website="true"] .website-account-settings { padding: 20px; margin-top: 18px; border: 1px solid #29232d; border-radius: 18px; background: #111116; }
.website-account-settings h2 { margin: 0 0 14px; font-size: 20px; }
.website-account-settings p { color: #a09aa9; font-size: 14px; overflow-wrap: anywhere; }
.website-account-settings button { margin-top: 12px; width: 100%; }
.website-login { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; border: 1px solid #49303a; border-radius: 24px; padding: 38px 28px 25px; background: #111116; color: #fff; box-shadow: 0 25px 100px #000b; }
.website-login::backdrop { background: #030409bb; backdrop-filter: blur(8px); }
.website-login-close { position: absolute; right: 15px; top: 12px; font-size: 28px; border: 0; background: transparent; color: #b9b1bf; cursor: pointer; }
.website-login h2 { margin: 0 0 10px; font-size: 27px; }
.website-login p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #b5aebd; }
.website-login label { display: block; margin-bottom: 9px; font-size: 13px; color: #d6cedd; }
.website-login input { width: 100%; box-sizing: border-box; border: 1px solid #443640; border-radius: 12px; background: #08090d; color: #fff; padding: 15px; font: inherit; margin-bottom: 16px; }
.website-login input:focus { outline: 2px solid #cb354a; outline-offset: 2px; }
.website-login .primary-button, .website-login .secondary-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 49px; margin: 8px 0; text-decoration: none; }
.website-login .website-login-note { font-size: 12px; margin: 15px 0 0; }
.website-login-separator { text-align: center; color: #827789; margin: 20px 0; font-size: 12px; }
.website-login .website-login-message { margin: 16px 0 0; }
.website-login .is-error { color: #ffadad; }
.website-confirmation-code { display: block; text-align: center; font-size: 32px; letter-spacing: 7px; margin-bottom: 25px; }
.website-login-restart { border: 0; color: #bca4ad; background: transparent; margin-top: 18px; cursor: pointer; }
html[data-website="true"] button:focus-visible, html[data-website="true"] a:focus-visible { outline: 2px solid #ff7289; outline-offset: 4px; }
@media (min-width: 960px) {
  html[data-website="true"] #app.app-shell { width: min(1240px, calc(100% - 64px)); max-width: 1240px; margin: 0 auto; padding-bottom: 40px; }
  html[data-website="true"] #app .topbar { position: sticky; top: 0; padding: 16px 0; background: #08090def; backdrop-filter: blur(18px); height: 86px; border-bottom: 1px solid #252028; }
  html[data-website="true"] #app .brand { position: static; transform: none; margin: 0; order: -1; }
  html[data-website="true"] .website-account { order: 5; }
  html[data-website="true"] #app .bottom-nav { position: fixed; top: 19px; bottom: auto; left: 50%; right: auto; margin: 0; transform: translateX(-50%); width: 420px; min-height: 50px; height: 50px; border: 0; border-radius: 12px; background: #171319; padding: 0 10px; z-index: 100; }
  html[data-website="true"] #app .bottom-nav .nav-item { flex-direction: row; gap: 8px; font-size: 13px; }
  html[data-website="true"] #app .bottom-nav .nav-item svg { width: 18px; height: 18px; }
  html[data-website="true"] #app .screen { padding: 30px 0 50px; }
  html[data-website="true"] #app .approved-hero { min-height: 420px; border-radius: 24px; }
  html[data-website="true"] #app .approved-hero__copy { padding: 65px 55px; max-width: 63%; }
  html[data-website="true"] #app .approved-hero__copy h1 { font-size: clamp(44px, 5vw, 70px); line-height: 1.05; }
  html[data-website="true"] #app .approved-hero__copy p { max-width: 350px; font-size: 17px; }
  html[data-website="true"] #app .approved-hero__character { right: 30px; width: 450px; height: 470px; object-fit: contain; object-position: bottom; }
  html[data-website="true"] #app .catalog-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  html[data-website="true"] #app .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  html[data-website="true"] #app .product-approved { max-width: 960px; margin: 0 auto; }
  html[data-website="true"] #app .profile-approved, html[data-website="true"] #app .purchases-approved, html[data-website="true"] #app .documents-approved, html[data-website="true"] #app .support-approved, html[data-website="true"] #app .extra-screen { max-width: 800px; margin: 0 auto; }
  html[data-website="true"] .checkout-sheet { max-width: 620px; border-radius: 24px; }
}
@media (max-width: 959px) {
  html[data-website="true"] .website-account { font-size: 11px; padding: 8px 10px; }
  html[data-website="true"] #app .topbar .brand { width: 110px; }
  html[data-website="true"] #app .topbar { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-website="true"] *, html[data-website="true"] *::before, html[data-website="true"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html[data-website="true"] #app .topbar { display: flex; gap: 8px; }
html[data-website="true"] #app .topbar .brand { position: static; transform: none; flex-shrink: 0; margin: 0 auto; }
html[data-website="true"] #app .topbar__back:not(.is-visible) { display: none; }
html[data-website="true"] .website-account { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 960px) {
  html[data-website="true"] #app .topbar .brand { margin: 0 auto 0 0; width: 140px; }
}
@media (max-width: 359px) {
  html[data-website="true"] #app .topbar { padding-left: 10px; padding-right: 10px; gap: 5px; }
  html[data-website="true"] #app .topbar .brand { width: 85px; }
  html[data-website="true"] #app .topbar .icon-button { width: 32px; }
  html[data-website="true"] .website-account { font-size: 10px; padding: 8px; }
}