:root {
  --bg: #000;
  --surface: #0a0c0e;
  --surface-2: #101316;
  --surface-3: #14181c;
  --line: #2a2f34;
  --line-red: rgba(230, 29, 35, 0.58);
  --text: #f5f5f5;
  --muted: #a8aaad;
  --red: #e21e25;
  --red-bright: #ff2a31;
  --red-deep: #8e080d;
  --shadow-red: 0 0 28px rgba(226, 30, 37, 0.3);
  --shell: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

body::before {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

svg {
  display: block;
}

.shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 78px;
  background: linear-gradient(180deg, rgba(2, 3, 4, 0.98), rgba(3, 4, 5, 0.95));
  border-bottom: 1px solid rgba(226, 30, 37, 0.34);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.header-inner {
  position: relative;
  width: min(var(--shell), calc(100% - 84px));
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.site-header .header-brand {
  position: relative;
  z-index: 2;
  width: 136px;
  height: 100%;
  margin-right: 18px;
  align-self: stretch;
  justify-content: center;
  overflow: visible;
}

.brand-logo {
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 2;
  width: 110px;
  max-width: none;
  height: auto;
  display: block;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 8px rgba(229, 25, 32, 0.28));
}

.brand-crop {
  display: block;
  width: 106px;
  height: 66px;
  background-image: url("../images/home/ui-reference.png");
  background-repeat: no-repeat;
  background-size: 994% auto;
  background-position: 4.56% 0.34%;
  filter: drop-shadow(0 0 10px rgba(230, 27, 33, 0.28));
}

.main-nav {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: #eeeeef;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--red-bright);
  box-shadow: 0 0 10px rgba(255, 42, 49, 0.82);
  transition: width 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--red-bright);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 32px;
}

.header-tools {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transform: translateY(3px);
}

.search-box {
  width: 201px;
  height: 32px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  background: linear-gradient(180deg, #101315, #090b0d);
  border: 1px solid #32363a;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 14px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box:focus-within {
  border-color: rgba(255, 42, 49, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 42, 49, 0.1);
}

.search-box svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.search-box input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.76rem;
}

.search-box input::placeholder {
  color: #c3c3c3;
}

.round-button {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #f2f2f2;
  background: #080a0b;
  border: 1px solid #5a5e62;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.round-button:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
  transform: translateY(-2px);
}

.round-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-count {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red);
  border: 2px solid #050607;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.cart-count[hidden] { display: none !important; }

.mobile-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  background: transparent;
  border: 1px solid #3c4145;
  border-radius: 8px;
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  position: relative;
  min-height: max(440px, calc(100vh - 78px));
  min-height: max(440px, calc(100svh - 78px));
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(3, 4, 5, 0.98) 0%, rgba(3, 4, 5, 0.76) 38%, rgba(3, 4, 5, 0.04) 72%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.05) 70%, #050607 100%),
    url("../images/home/hero-dc-gaming.png");
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid rgba(226, 30, 37, 0.22);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(128deg, transparent 0 178px, rgba(220, 24, 31, 0.17) 179px, transparent 181px 360px);
  mask-image: linear-gradient(90deg, transparent 5%, #000 45%, #000 100%);
}

.hero-glow {
  position: absolute;
  left: 8%;
  top: 28%;
  width: 390px;
  height: 250px;
  z-index: -1;
  background: radial-gradient(circle, rgba(184, 12, 18, 0.13), transparent 68%);
  filter: blur(18px);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-copy {
  width: min(680px, 61%);
  padding-block: 70px 58px;
}

.eyebrow {
  margin: 0 0 14px;
  color: #c1c2c4;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  color: #f4f4f5;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(3rem, 5vw, 4.4rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.45);
}

.hero h1 span {
  display: inline-block;
  margin-top: 10px;
  color: var(--red-bright);
  text-shadow: 0 0 25px rgba(229, 18, 26, 0.25), 3px 4px 0 #56080b;
}

.hero-description {
  margin: 22px 0 28px;
  color: #c9c9ca;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-style: italic;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  min-height: 50px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid #414448;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.button span {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: linear-gradient(180deg, #df2027 0%, #a20b10 100%);
  border-color: #ff3d43;
  box-shadow: inset 0 0 18px rgba(255, 85, 89, 0.22), var(--shadow-red);
}

.button-primary:hover {
  background: linear-gradient(180deg, #f52a31 0%, #b80d14 100%);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.12), 0 0 34px rgba(226, 30, 37, 0.5);
}

.button-secondary {
  background: rgba(12, 14, 16, 0.84);
}

.button-secondary:hover {
  border-color: var(--red);
  background: rgba(25, 9, 11, 0.95);
}

/* Image banner */
.hero.hero-banner {
  width: min(var(--shell), calc(100% - 84px));
  min-height: 0;
  aspect-ratio: 2 / 1;
  display: block;
  background: var(--bg);
  border-bottom: 0;
}

.hero.hero-banner::before {
  display: none;
}

.hero-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.screen-red-streaks {
  position: fixed;
  inset: 0;
  z-index: 45;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: screen;
}

.hero-banner-actions {
  position: absolute;
  left: 5.35%;
  bottom: 27%;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-banner-actions .button {
  min-width: 206px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
}

/* Trust strip */
.trust-strip {
  position: relative;
  z-index: 3;
  min-height: 92px;
  margin-top: -22px;
  padding: 15px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: linear-gradient(100deg, rgba(11, 13, 15, 0.97), rgba(4, 5, 6, 0.98));
  border: 1px solid #40454a;
  border-bottom-color: rgba(229, 32, 38, 0.75);
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 50%, 97.5% 100%, 2.5% 100%, 0 50%);
}

.trust-item {
  min-height: 60px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-right: 1px solid #34383c;
}

.trust-item:first-child {
  padding-left: 16px;
}

.trust-item:last-child {
  border-right: 0;
}

.trust-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--red-bright);
  filter: drop-shadow(0 0 8px rgba(230, 30, 37, 0.35));
}

.trust-icon svg {
  width: 45px;
  height: 45px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item strong,
.trust-item small {
  display: block;
}

.trust-item strong {
  font-size: 0.92rem;
  text-transform: uppercase;
}

.trust-item small {
  margin-top: 3px;
  color: #b5b6b8;
  font-size: 0.78rem;
}

/* Shared sections */
.content-section {
  padding-top: 42px;
}

.section-heading {
  min-height: 44px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.section-heading h2 {
  margin: 0;
  color: #e4e6e9;
  font-size: clamp(1.12rem, 2.2vw, 1.45rem);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.heading-icon {
  width: 21px;
  height: 25px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: -5px;
}

.heading-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(255, 32, 38, 0.32));
}

.section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red-bright);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.section-heading-link {
  padding: 7px 2px 7px 8px;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.section-heading-link:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 42, 49, 0.55);
}

.section-link-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.section-heading-link:hover .section-link-icon {
  transform: translateX(3px);
}

/* Games */
.game-carousel {
  position: relative;
}

.game-track {
  display: grid;
  grid-auto-columns: minmax(155px, 1fr);
  grid-auto-flow: column;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: inline mandatory;
}

.game-track::-webkit-scrollbar {
  display: none;
}

.all-games-section {
  padding-bottom: 64px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.game-card {
  position: relative;
  min-width: 0;
  scroll-snap-align: start;
}

.game-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 0.67;
  overflow: hidden;
  background-image: url("../images/home/ui-reference.png");
  background-repeat: no-repeat;
  background-size: 742% auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.game-card > a { display: block; }

.game-cover-dynamic {
  background: #141719;
  background-image: none;
}

.game-cover-dynamic > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.game-cover-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.2);
  background: radial-gradient(circle, rgba(211, 26, 34, 0.2), transparent 44%), #101315;
  font-size: 2rem;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.game-card:hover .game-cover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 20px rgba(226, 30, 37, 0.16);
}

.poster-beast { background-position: 5.2% 46.9%; }
.poster-dogma { background-position: 23% 46.9%; }
.poster-assassin { background-position: 41.1% 46.9%; }
.poster-palworld { background-position: 58.9% 46.9%; }
.poster-cities { background-position: 76.9% 46.9%; }
.poster-gothic { background-position: 95% 46.9%; }

.game-card h3 {
  min-height: 44px;
  margin: 12px 0 5px;
  color: #ededee;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}

.store-dot {
  display: inline-grid;
  margin-right: 5px;
  color: #cfd1d2;
  font-size: 0.72rem;
}

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
}

.price-row del {
  color: #8f9295;
  font-size: 0.78rem;
}

.price-row strong {
  margin-left: auto;
  color: var(--red-bright);
  font-size: 0.88rem;
}

.carousel-arrow {
  position: absolute;
  /* Align to the centre of the poster, rather than the card metadata below it. */
  top: 38%;
  z-index: 5;
  width: 38px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(3, 4, 5, 0.75);
  border: 1px solid #383c40;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.carousel-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.game-carousel:hover .carousel-arrow,
.carousel-arrow:focus-visible {
  opacity: 1;
}

.carousel-arrow:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.carousel-prev { left: -42px; }
.carousel-next { right: -42px; }

/* Featured promotion */
.featured-promotion {
  position: relative;
  aspect-ratio: 4.7 / 1;
  margin-top: 38px;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #030405;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.6), 0 14px 28px rgba(0, 0, 0, 0.24);
}

.featured-promotion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 46%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0.52) 100%);
}

.featured-promotion img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center top;
  transition: transform 0.3s ease;
}

.featured-promotion-cta {
  position: absolute;
  top: 50%;
  right: 28px;
  z-index: 2;
  min-width: 150px;
  min-height: 46px;
  padding: 0 17px 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  background: linear-gradient(180deg, #e52930 0%, #a80b11 100%);
  border: 1px solid #ff555a;
  border-radius: 7px;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.14), 0 0 18px rgba(226, 30, 37, 0.38);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.featured-promotion-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.featured-promotion:hover img {
  transform: scale(1.018);
}

.featured-promotion:hover .featured-promotion-cta {
  transform: translateX(-3px);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.2), 0 0 24px rgba(226, 30, 37, 0.55);
}

/* Profile */
.profile-page {
  padding: 24px 0 40px;
}

.profile-hero {
  position: relative;
  min-height: 112px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 42%, rgba(195, 17, 25, 0.24), transparent 26%),
    linear-gradient(110deg, #111619, #080a0c);
  border: 1px solid #30363a;
  border-bottom-color: rgba(226, 30, 37, 0.65);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.23);
}

.profile-hero::after {
  content: "";
  position: absolute;
  top: -110px;
  right: 20%;
  width: 1px;
  height: 380px;
  background: linear-gradient(180deg, transparent, rgba(238, 39, 46, 0.5), transparent);
  transform: rotate(36deg);
}

.profile-avatar {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #e42b32, #73080d);
  border: 2px solid rgba(255, 100, 105, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(226, 30, 37, 0.1), 0 0 20px rgba(226, 30, 37, 0.35);
  font-size: 1.9rem;
  font-weight: 900;
}

.profile-hero-info {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-hero-info > p {
  margin: 0 0 4px;
  color: var(--red-bright);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-hero h1 {
  margin: 0;
  color: #f1f2f3;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.12;
}

.profile-hero-info > span {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #93d8af;
  font-size: 0.71rem;
}

.profile-hero-info > span svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.profile-hero-actions {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.profile-hero-actions a {
  min-height: 35px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f1f2f3;
  background: rgba(23, 27, 30, 0.9);
  border: 1px solid #42484c;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.profile-hero-actions a span { color: var(--red-bright); font-size: 1rem; }
.profile-hero-actions a:hover { color: var(--red-bright); border-color: var(--red-bright); }

.profile-hero-actions small { color: #8b9195; font-size: 0.66rem; }

.profile-layout {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.profile-nav,
.profile-panel,
.profile-library-preview {
  background: linear-gradient(145deg, rgba(18, 22, 25, 0.98), rgba(6, 8, 10, 0.98));
  border: 1px solid #2c3135;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 32px rgba(0, 0, 0, 0.18);
}

.profile-nav {
  padding: 12px 8px;
}

.profile-nav > p {
  margin: 4px 9px 10px;
  color: #7f8589;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-nav a,
.profile-nav button {
  width: 100%;
  min-height: 41px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #aeb2b5;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 0.77rem;
  transition: color 0.2s ease, background 0.2s ease;
}

.profile-nav a:hover,
.profile-nav button:hover { color: #f0f1f2; background: rgba(255, 255, 255, 0.04); }

.profile-nav a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(202, 22, 30, 0.32), rgba(202, 22, 30, 0.07));
  box-shadow: inset 2px 0 0 var(--red-bright);
}

.profile-nav svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.profile-nav b {
  min-width: 21px;
  height: 19px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(226, 30, 37, 0.82);
  border-radius: 10px;
  font-size: 0.61rem;
}

.profile-nav button {
  margin-top: 7px;
  color: #e37b7f;
  border-top: 1px solid #2a2f33;
  border-radius: 0 0 6px 6px;
}

.profile-content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.profile-content > section { min-width: 0; }
.profile-summary { min-width: 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: 12px; }
.profile-summary > section { min-width: 0; }
.profile-page [id] { scroll-margin-top: 94px; }

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-stats article {
  min-height: 76px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, rgba(18, 22, 25, 0.98), rgba(6, 8, 10, 0.98));
  border: 1px solid #2d3337;
  border-radius: 9px;
}

.profile-stat-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--red-bright);
  background: rgba(226, 30, 37, 0.1);
  border: 1px solid rgba(226, 30, 37, 0.35);
  border-radius: 8px;
}

.profile-stat-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.profile-stats p {
  margin: 0;
  color: #959a9e;
  font-size: 0.69rem;
}

.profile-stats strong {
  display: block;
  margin-top: 4px;
  color: #f0f1f2;
  font-size: clamp(0.92rem, 1.45vw, 1.12rem);
}

.profile-panel,
.profile-library-preview {
  margin-top: 0;
  padding: 16px;
}

.profile-panel-heading {
  padding-bottom: 12px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #2c3135;
}

.profile-panel-heading p {
  margin: 0 0 4px;
  color: var(--red-bright);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-panel-heading h2 {
  margin: 0;
  color: #eff0f1;
  font-size: 1.02rem;
  text-transform: uppercase;
}

.profile-panel-heading > button,
.profile-panel-heading > a {
  flex-shrink: 0;
  padding: 0;
  color: #c4c7c9;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  transition: color 0.2s ease;
}

.profile-panel-heading > button:hover,
.profile-panel-heading > a:hover { color: var(--red-bright); }
.profile-panel-heading > a span { margin-left: 4px; color: var(--red-bright); font-size: 1rem; }

.profile-details {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-details > div {
  min-height: 64px;
  padding: 12px 12px 8px 0;
  border-bottom: 1px solid #292e32;
}

.profile-details > div:nth-child(even) { padding-left: 12px; padding-right: 0; border-left: 1px solid #292e32; }
.profile-details > div:nth-last-child(-n + 2) { border-bottom: 0; }

.profile-details dt {
  color: #8e9498;
  font-size: 0.7rem;
}

.profile-details dd {
  margin: 5px 0 0;
  color: #e4e5e6;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.profile-details dd span {
  margin-left: 6px;
  color: #82d6a4;
  font-size: 0.64rem;
}

.profile-details dd a {
  margin-left: 8px;
  color: var(--red-bright);
  font-size: 0.67rem;
  font-weight: 700;
}

.profile-orders-table { overflow-x: auto; }

.profile-order-row {
  min-width: 600px;
  min-height: 44px;
  display: grid;
  grid-template-columns: 0.95fr 1.2fr 0.9fr 0.9fr 0.85fr;
  align-items: center;
  gap: 8px;
  color: #c7c9cb;
  border-bottom: 1px solid #292e32;
  font-size: 0.73rem;
}

.profile-order-row:last-child { border-bottom: 0; }
.profile-order-row strong { color: #e7e8e9; font-size: 0.71rem; }
.profile-order-row > span:not(:first-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-order-row > b { color: var(--red-bright); text-align: right; font-size: 0.76rem; }
.profile-order-row > time { color: #8f9599; }

.profile-order-labels {
  min-height: 39px;
  color: #7f8589;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.order-status {
  width: fit-content;
  min-height: 21px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 700;
}

.order-status.success {
  color: #8bddaa;
  background: rgba(57, 172, 105, 0.13);
  border: 1px solid rgba(81, 195, 126, 0.3);
}

.profile-library-games {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.profile-library-card { min-width: 0; display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 12px; }

.profile-library-games .game-cover {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: none;
}

.profile-library-game-info { min-width: 0; }
.profile-library-game-info h3 { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: #dedfe0; font-size: 0.8rem; font-weight: 700; line-height: 1.45; }
.profile-library-game-info small { display: block; margin-top: 5px; color: #82d6a4; font-size: 0.68rem; }
.profile-empty { margin: 12px 0 0; color: #959a9e; font-size: 0.8rem; }
.profile-library-games > .profile-empty { margin: 0; }

.profile-library-more {
  min-height: 36px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aeb2b5;
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed #3a4044;
  border-radius: 7px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.profile-library-more b { color: var(--red-bright); font-size: 0.85rem; }
.profile-library-more span { font-size: 0.67rem; }
.profile-library-more span:last-child { margin-left: auto; font-size: 1rem; }
.profile-library-more:hover { color: #fff; border-color: var(--red-bright); }

/* Promotions */
.promotions-page {
  padding: 42px 0 76px;
}

.promotions-hero {
  position: relative;
  aspect-ratio: 4.7 / 1;
  overflow: hidden;
  background: #030405;
  border: 1px solid rgba(226, 30, 37, 0.45);
  border-radius: 11px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.promotions-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 52%, rgba(0, 0, 0, 0.14));
}

.promotions-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.promotion-countdown {
  position: absolute;
  right: 28px;
  bottom: 20px;
  z-index: 1;
  min-width: 200px;
  padding: 9px 12px;
  text-align: center;
  background: rgba(5, 6, 7, 0.76);
  border: 1px solid rgba(255, 70, 76, 0.48);
  border-radius: 7px;
  backdrop-filter: blur(8px);
}

.promotion-countdown > span {
  display: block;
  color: #c3c5c7;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promotion-countdown > div {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.promotion-countdown b {
  min-width: 28px;
  color: #fff;
  font-size: 1rem;
}

.promotion-countdown i {
  color: var(--red-bright);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 800;
}

.promotion-perks {
  margin-top: 15px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: linear-gradient(100deg, rgba(17, 20, 23, 0.98), rgba(5, 7, 9, 0.98));
  border: 1px solid #2d3236;
  border-radius: 8px;
}

.promotion-perks span {
  min-height: 22px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9bcbe;
  border-right: 1px solid #31363a;
  font-size: 0.74rem;
  font-weight: 700;
}

.promotion-perks span:last-child { border-right: 0; }

.promotion-perks svg {
  width: 18px;
  height: 18px;
  color: var(--red-bright);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.promotion-deals {
  margin-top: 38px;
}

.promotion-section-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.promotion-section-heading p {
  margin: 0 0 4px;
  color: var(--red-bright);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.promotion-section-heading h2 {
  margin: 0;
  color: #ededee;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  text-transform: uppercase;
}

.promotion-section-heading a {
  padding-bottom: 3px;
  color: var(--red-bright);
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.promotion-section-heading a span { margin-left: 4px; font-size: 1rem; }
.promotion-section-heading a:hover { color: #fff; }

.promotion-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.promotion-game-card {
  min-width: 0;
}

.promotion-game-card a { display: block; }

.promotion-game-card .game-cover {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.promotion-game-card:hover .game-cover {
  border-color: rgba(226, 30, 37, 0.62);
}

.promotion-discount {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 42px;
  padding: 4px 5px;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #eb3037, #a50b10);
  border: 1px solid #ff555a;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(84, 4, 8, 0.42);
  font-size: 0.66rem;
  font-weight: 900;
}

.promotion-game-info {
  margin-top: 10px;
  color: #a4a8ab;
  font-size: 0.7rem;
}

.promotion-game-info .store-dot { margin-right: 3px; }

.promotion-game-card h3 {
  min-height: 40px;
  margin: 4px 0 4px;
  color: #ededee;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.promotion-coupons {
  margin-top: 46px;
  padding: 29px 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 50%, rgba(185, 17, 25, 0.26), transparent 42%),
    linear-gradient(100deg, #150609, #090b0d 65%);
  border: 1px solid rgba(226, 30, 37, 0.42);
  border-radius: 11px;
}

.promotion-coupon-copy > p {
  margin: 0 0 5px;
  color: #f03a40;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.promotion-coupon-copy h2 {
  margin: 0;
  color: #f0f1f2;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.promotion-coupon-copy h2 span { color: var(--red-bright); }

.promotion-coupon-copy > span {
  display: block;
  max-width: 320px;
  margin-top: 10px;
  color: #a5a9ad;
  font-size: 0.75rem;
  line-height: 1.5;
}

.promotion-code-list {
  display: grid;
  gap: 10px;
}

.promotion-code-list article {
  position: relative;
  min-height: 70px;
  padding: 13px 92px 13px 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(8, 10, 12, 0.82);
  border: 1px dashed rgba(255, 77, 83, 0.58);
  border-radius: 7px;
}

.promotion-code-list article::before,
.promotion-code-list article::after {
  content: "";
  position: absolute;
  right: 98px;
  width: 12px;
  height: 12px;
  background: #0e0709;
  border: 1px solid rgba(255, 77, 83, 0.58);
  border-radius: 50%;
}

.promotion-code-list article::before { top: -7px; }
.promotion-code-list article::after { bottom: -7px; }

.promotion-code-list span {
  color: #aeb2b5;
  font-size: 0.68rem;
}

.promotion-code-list strong {
  margin-top: 4px;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.promotion-code-list button {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 72px;
  height: 32px;
  color: #f2f3f4;
  background: #1c2023;
  border: 1px solid #454a4e;
  border-radius: 5px;
  cursor: pointer;
  transform: translateY(-50%);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.promotion-code-list button:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

/* Launcher */
.launcher-page {
  padding: 42px 0 76px;
}

.launcher-hero {
  position: relative;
  min-height: 410px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.94fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 52%, rgba(180, 15, 24, 0.28), transparent 38%),
    linear-gradient(112deg, #0b0e10 0%, #090b0d 53%, #140609 100%);
  border: 1px solid #30353a;
  border-bottom-color: rgba(226, 30, 37, 0.6);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 46px rgba(0, 0, 0, 0.26);
}

.launcher-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  right: 17%;
  width: 1px;
  height: 720px;
  background: linear-gradient(180deg, transparent, rgba(255, 43, 50, 0.46), transparent);
  transform: rotate(34deg);
}

.launcher-hero-copy {
  position: relative;
  z-index: 1;
  padding: 55px 20px 48px 52px;
}

.launcher-kicker {
  margin: 0 0 8px;
  color: var(--red-bright);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.launcher-hero h1 {
  margin: 0;
  color: #f4f4f5;
  font-size: clamp(2.25rem, 4.2vw, 4.15rem);
  line-height: 0.96;
  text-transform: uppercase;
}

.launcher-hero h1 span {
  display: block;
  color: var(--red-bright);
  text-shadow: 0 0 20px rgba(226, 30, 37, 0.28);
}

.launcher-description {
  max-width: 500px;
  margin: 17px 0 22px;
  color: #b8bbbe;
  font-size: 0.91rem;
  line-height: 1.65;
}

.launcher-meta {
  display: flex;
  align-items: center;
  gap: 19px;
}

.launcher-meta span {
  color: #969b9e;
  font-size: 0.72rem;
}

.launcher-meta span + span {
  padding-left: 19px;
  border-left: 1px solid #3a3f43;
}

.launcher-meta b {
  margin-right: 5px;
  color: #e4e5e6;
  font-size: 0.78rem;
}

.launcher-actions {
  margin-top: 27px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.launcher-download-button {
  min-width: 210px;
  gap: 11px;
  text-decoration: none;
}

.launcher-download-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.launcher-requirements-link {
  color: #c6c9cb;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(226, 30, 37, 0.65);
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.launcher-requirements-link:hover { color: var(--red-bright); }

.launcher-download-note {
  margin: 15px 0 0;
  color: #777d81;
  font-size: 0.69rem;
}

.launcher-hero-art {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 33px 38px 33px 0;
}

.launcher-preview-window {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  overflow: hidden;
  background: #0a0d0f;
  border: 1px solid #43494d;
  border-radius: 9px;
  box-shadow: 0 28px 42px rgba(0, 0, 0, 0.45), 0 0 34px rgba(226, 30, 37, 0.12);
  transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
}

.launcher-preview-topbar {
  height: 29px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #aeb3b6;
  background: #14181b;
  border-bottom: 1px solid #30363a;
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.launcher-preview-topbar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b6064;
}

.launcher-preview-topbar i:first-child { background: #d1272f; }
.launcher-preview-topbar span { margin-left: 5px; }

.launcher-preview-body {
  min-height: 242px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
}

.launcher-preview-sidebar {
  padding-top: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: #101417;
  border-right: 1px solid #292f33;
}

.launcher-preview-sidebar img {
  width: 27px;
  height: 24px;
  object-fit: contain;
}

.launcher-preview-sidebar b {
  width: 18px;
  height: 18px;
  background: #2c3236;
  border-radius: 5px;
}

.launcher-preview-sidebar b.active {
  background: linear-gradient(135deg, #e12b32, #93090e);
  box-shadow: 0 0 10px rgba(226, 30, 37, 0.55);
}

.launcher-preview-content {
  padding: 22px 21px;
  background: radial-gradient(circle at 90% 10%, rgba(182, 13, 22, 0.23), transparent 32%), #0c0f11;
}

.launcher-preview-content > p {
  margin: 0;
  color: #e6373e;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.launcher-preview-content h2 {
  margin: 4px 0 13px;
  color: #f0f1f2;
  font-size: 0.87rem;
}

.launcher-preview-game {
  height: 84px;
  padding: 7px;
  display: flex;
  gap: 10px;
  background: rgba(22, 27, 30, 0.92);
  border: 1px solid #30363a;
  border-radius: 6px;
}

.launcher-preview-game .game-cover {
  width: 49px;
  flex: 0 0 auto;
  box-shadow: none;
}

.launcher-preview-game span {
  min-width: 0;
  padding-top: 9px;
}

.launcher-preview-game strong,
.launcher-preview-game small { display: block; }
.launcher-preview-game strong { color: #e5e6e7; font-size: 0.6rem; }
.launcher-preview-game small { margin-top: 4px; color: #8f969a; font-size: 0.52rem; }
.launcher-preview-game i { display: block; width: 67px; height: 4px; margin-top: 8px; background: linear-gradient(90deg, #dc2229 0 92%, #3a4044 92%); border-radius: 4px; }

.launcher-preview-progress {
  margin-top: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px auto;
  align-items: center;
  gap: 9px;
}

.launcher-preview-progress span b,
.launcher-preview-progress span small { display: block; }
.launcher-preview-progress span b { color: #d9dbdd; font-size: 0.55rem; }
.launcher-preview-progress span small { margin-top: 3px; color: #798086; font-size: 0.48rem; }
.launcher-preview-progress > i { height: 4px; overflow: hidden; background: #343a3e; border-radius: 5px; }
.launcher-preview-progress > i b { width: 68%; height: 100%; display: block; background: #d51d25; border-radius: inherit; }
.launcher-preview-progress em { color: #ed4248; font-size: 0.55rem; font-style: normal; font-weight: 800; }

.launcher-benefits {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: linear-gradient(100deg, rgba(14, 17, 19, 0.94), rgba(6, 8, 9, 0.94));
  border: 1px solid #2e3337;
  border-radius: 10px;
}

.launcher-benefits article {
  min-height: 102px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.launcher-benefits article + article { border-left: 1px solid #2c3135; }

.launcher-benefits article > span {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--red-bright);
  background: rgba(226, 30, 37, 0.1);
  border: 1px solid rgba(226, 30, 37, 0.35);
  border-radius: 8px;
}

.launcher-benefits svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.launcher-benefits h2 {
  margin: 0 0 4px;
  color: #e9eaeb;
  font-size: 0.79rem;
}

.launcher-benefits p {
  margin: 0;
  color: #91969a;
  font-size: 0.7rem;
  line-height: 1.45;
}

.launcher-requirements {
  margin-top: 24px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  align-items: center;
  gap: 28px;
  background: rgba(8, 10, 12, 0.9);
  border: 1px solid #2b3034;
  border-radius: 10px;
}

.launcher-requirements > div > p {
  margin: 0 0 4px;
  color: var(--red-bright);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.launcher-requirements h2 {
  margin: 0;
  color: #ecedee;
  font-size: 1.04rem;
  text-transform: uppercase;
}

.launcher-requirements dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.launcher-requirements dl > div {
  min-height: 44px;
  padding: 0 18px;
  border-left: 1px solid #2c3135;
}

.launcher-requirements dt {
  color: #858b90;
  font-size: 0.67rem;
}

.launcher-requirements dd {
  margin: 4px 0 0;
  color: #d6d8da;
  font-size: 0.73rem;
  line-height: 1.35;
}

/* Store */
.store-page {
  padding: 42px 0 76px;
}

.store-banner {
  position: relative;
  margin-bottom: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 66% 54%, rgba(143, 13, 20, 0.24), transparent 48%);
  border-bottom: 1px solid rgba(226, 30, 37, 0.38);
}

.store-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.store-mobile-search {
  display: none;
}

.store-page-heading {
  padding-bottom: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.store-kicker {
  margin: 0 0 5px;
  color: var(--red-bright);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.store-page-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.store-page-heading > div > p:not(.store-kicker) {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.store-heading-stat {
  min-width: 182px;
  padding: 10px 0 10px 22px;
  border-left: 1px solid rgba(226, 30, 37, 0.45);
}

.store-heading-stat strong,
.store-heading-stat span {
  display: block;
}

.store-heading-stat strong {
  color: var(--red-bright);
  font-size: 1.45rem;
  line-height: 1;
}

.store-heading-stat span {
  margin-top: 4px;
  color: #a4a8ab;
  font-size: 0.72rem;
}

.store-toolbar {
  min-height: 63px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(100deg, rgba(18, 22, 25, 0.96), rgba(8, 10, 12, 0.96));
  border: 1px solid #2b3034;
  border-radius: 9px;
}

.store-toolbar > p {
  margin: 0;
  color: #a7aaad;
  font-size: 0.78rem;
}

.store-toolbar > p strong { color: #f0f1f2; }

.store-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.store-mobile-filter { display: none; }

.store-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ca0a3;
  font-size: 0.73rem;
}

.store-sort select {
  height: 34px;
  padding: 0 27px 0 10px;
  color: #e8e9ea;
  background: #0a0c0e;
  border: 1px solid #363b3f;
  border-radius: 6px;
  outline: 0;
  font: inherit;
  font-weight: 700;
}

.store-sort select:focus { border-color: var(--red-bright); }

.store-content {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.store-filters {
  padding: 18px;
  background: linear-gradient(145deg, rgba(18, 22, 25, 0.98), rgba(6, 8, 10, 0.98));
  border: 1px solid #2c3135;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 32px rgba(0, 0, 0, 0.18);
}

.store-filter-heading {
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2c3034;
}

.store-filter-heading h2 {
  margin: 0;
  font-size: 0.88rem;
  text-transform: uppercase;
}

.store-filter-heading button,
.store-filter-heading a {
  padding: 0;
  color: #a7aaad;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.7rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.store-filter-heading button:hover,
.store-filter-heading a:hover { color: var(--red-bright); }

.store-filters fieldset {
  min-width: 0;
  margin: 0;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid #292e32;
}

.store-filters fieldset:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.store-filters legend {
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  color: #e4e5e6;
  font-size: 0.76rem;
  font-weight: 800;
}

.store-filters fieldset > label {
  min-height: 27px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #aaadb0;
  cursor: pointer;
  font-size: 0.74rem;
}

.store-filters input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--red);
}

.store-filters label b {
  color: #6e7478;
  font-size: 0.67rem;
  font-weight: 500;
}

.store-filter-option {
  min-height: 29px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: #aaadb0;
  font-size: 0.74rem;
  transition: color 0.2s ease;
}

.store-filter-option:hover,
.store-filter-option.is-active { color: #fff; }

.store-filter-option > i {
  width: 14px;
  height: 14px;
  display: block;
  background: #0a0c0e;
  border: 1px solid #555c60;
  border-radius: 3px;
}

.store-filter-option.is-active > i {
  position: relative;
  background: #d91f27;
  border-color: #f1444b;
}

.store-filter-option.is-active > i::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.57rem;
  font-style: normal;
  font-weight: 900;
}

.store-filter-option > b { color: #6e7478; font-size: 0.67rem; font-weight: 500; }
.store-filter-option.is-static { cursor: default; }

.store-filter-note {
  margin-top: 17px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(207, 22, 30, 0.07);
  border: 1px solid rgba(218, 35, 42, 0.2);
  border-radius: 6px;
}

.store-filter-note > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #e82b33;
  background: rgba(211, 26, 34, 0.12);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 950;
}

.store-filter-note p { margin: 0; display: grid; gap: 2px; }
.store-filter-note strong { color: #d9dcdd; font-size: 0.63rem; }
.store-filter-note small { color: #777f83; font-size: 0.55rem; line-height: 1.4; }

.store-toolbar-clear {
  color: #ef343b;
  font-size: 0.68rem;
  font-weight: 750;
}

.store-empty-state {
  min-height: 290px;
  padding: 30px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  background: linear-gradient(145deg, rgba(16, 19, 21, 0.95), rgba(7, 9, 10, 0.98));
  border: 1px dashed #33393d;
  border-radius: 9px;
}

.store-empty-state > span { color: #d8272f; font-size: 2rem; font-weight: 950; }
.store-empty-state h2 { margin: 12px 0 6px; color: #eceeef; font-size: 1rem; }
.store-empty-state p { margin: 0; color: #7e8589; font-size: 0.73rem; }
.store-empty-state > a { margin-top: 16px; padding: 9px 14px; color: #fff; background: #bd151c; border: 1px solid #ea343b; border-radius: 4px; font-size: 0.67rem; font-weight: 850; text-transform: uppercase; }
.home-game-empty { min-height: 210px; }

.promotion-live-badge { display: grid; gap: 4px; }
.promotion-live-badge strong { color: #fff; font-size: 1rem; text-transform: uppercase; }

.store-price-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #9ca0a3;
  font-size: 0.66rem;
}

.store-price-range i {
  height: 3px;
  flex: 1;
  background: linear-gradient(90deg, var(--red) 0 72%, #393f43 72% 100%);
  border-radius: 10px;
}

.store-price-inputs {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.store-price-inputs input {
  min-width: 0;
  height: 32px;
  padding: 0 7px;
  color: #e1e2e3;
  background: #090b0d;
  border: 1px solid #34393d;
  border-radius: 5px;
  outline: 0;
  font-size: 0.67rem;
}

.store-price-inputs input:focus { border-color: var(--red-bright); }

.store-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 18px;
}

.store-game-card a { display: block; }

.store-game-card h2 {
  min-height: 44px;
  margin: 12px 0 5px;
  color: #ededee;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}

.store-game-card a:focus-visible {
  outline: 0;
}

.store-game-card a:focus-visible .game-cover {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

/* Support */
.support-page {
  padding: 42px 0 76px;
}

.support-hero {
  position: relative;
  padding: 54px 34px 48px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 118%, rgba(220, 23, 31, 0.23), transparent 47%),
    linear-gradient(135deg, rgba(18, 22, 25, 0.98), rgba(5, 7, 9, 0.98));
  border: 1px solid #32373b;
  border-bottom-color: rgba(226, 30, 37, 0.65);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 20px 42px rgba(0, 0, 0, 0.22);
}

.support-hero::before,
.support-hero::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 33, 40, 0.48), transparent);
}

.support-hero::before {
  top: 23px;
  left: -70px;
  transform: rotate(-14deg);
}

.support-hero::after {
  right: -70px;
  bottom: 21px;
  transform: rotate(-14deg);
}

.support-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: var(--red-bright);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.support-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #f2f3f4;
  font-size: clamp(1.8rem, 3.2vw, 2.65rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.support-hero > p:not(.support-kicker) {
  position: relative;
  z-index: 1;
  margin: 11px 0 23px;
  color: #aeb2b5;
  font-size: 0.9rem;
}

.support-search {
  position: relative;
  z-index: 1;
  width: min(100%, 590px);
  height: 48px;
  margin: 0 auto;
  padding: 0 5px 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: rgba(5, 7, 8, 0.92);
  border: 1px solid #43494d;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-search:focus-within {
  border-color: rgba(255, 42, 49, 0.82);
  box-shadow: 0 0 0 3px rgba(255, 42, 49, 0.1), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.support-search svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: #afb3b6;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.support-search input {
  width: 100%;
  min-width: 0;
  color: #f0f1f2;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.78rem;
}

.support-search input::placeholder { color: #777e82; }

.support-search button {
  height: 36px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(180deg, #d9232a, #a70c12);
  border: 1px solid #f03940;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.support-search button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.support-contact-grid {
  scroll-margin-top: 96px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.support-contact-card {
  min-height: 140px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(145deg, rgba(18, 22, 25, 0.98), rgba(6, 8, 10, 0.98));
  border: 1px solid #2d3337;
  border-radius: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-contact-card:hover {
  border-color: rgba(226, 30, 37, 0.68);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.23), 0 0 20px rgba(226, 30, 37, 0.1);
  transform: translateY(-3px);
}

.support-contact-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--red-bright);
  background: rgba(226, 30, 37, 0.09);
  border: 1px solid rgba(226, 30, 37, 0.38);
  border-radius: 9px;
}

.support-contact-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.support-contact-card h2 {
  margin: 1px 0 5px;
  color: #ecedee;
  font-size: 0.88rem;
}

.support-contact-card p {
  min-height: 32px;
  margin: 0 0 9px;
  color: #909599;
  font-size: 0.73rem;
  line-height: 1.45;
}

.support-contact-card a,
.support-contact-card button {
  padding: 0;
  color: #f3f4f5;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  transition: color 0.2s ease;
}

.support-contact-card a span,
.support-contact-card button span {
  margin-left: 5px;
  color: var(--red-bright);
  font-size: 1rem;
}

.support-contact-card a:hover,
.support-contact-card button:hover { color: var(--red-bright); }

.support-content {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(315px, 0.84fr);
  align-items: start;
  gap: 24px;
}

.support-faq,
.support-ticket {
  padding: 24px;
  background: linear-gradient(145deg, rgba(18, 22, 25, 0.98), rgba(6, 8, 10, 0.98));
  border: 1px solid #2c3135;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.18);
}

.support-section-heading p {
  margin: 0 0 4px;
  color: var(--red-bright);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.support-section-heading h2 {
  margin: 0;
  color: #f0f1f2;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.faq-list { margin-top: 18px; }

.faq-list details {
  scroll-margin-top: 96px;
  border-bottom: 1px solid #292e32;
}

.faq-list details:first-child { border-top: 1px solid #292e32; }

.faq-list summary {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #dcdee0;
  cursor: pointer;
  font-size: 0.81rem;
  font-weight: 700;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary span {
  color: var(--red-bright);
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform 0.2s ease;
}

.faq-list details[open] summary span { transform: rotate(45deg); }

.faq-list details p {
  margin: -3px 28px 16px 0;
  color: #959a9e;
  font-size: 0.76rem;
  line-height: 1.6;
}

.support-ticket-form {
  margin-top: 19px;
}

.support-ticket-form label {
  display: block;
  margin: 13px 0 7px;
  color: #c1c4c6;
  font-size: 0.73rem;
  font-weight: 700;
}

.support-ticket-form label:first-child { margin-top: 0; }

.support-ticket-form label span {
  color: #7d8387;
  font-weight: 400;
}

.support-ticket-form select,
.support-ticket-form input,
.support-ticket-form textarea {
  width: 100%;
  color: #eaebec;
  background: #090b0d;
  border: 1px solid #363b3f;
  border-radius: 6px;
  outline: 0;
  font: inherit;
  font-size: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-ticket-form select,
.support-ticket-form input {
  height: 39px;
  padding: 0 11px;
}

.support-ticket-form textarea {
  min-height: 100px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.5;
}

.support-ticket-form select:focus,
.support-ticket-form input:focus,
.support-ticket-form textarea:focus {
  border-color: rgba(255, 42, 49, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 42, 49, 0.1);
}

.support-ticket-form ::placeholder { color: #72787c; }

.support-submit-button {
  width: 100%;
  margin-top: 18px;
}

/* Cart */
.cart-route .screen-red-streaks { display: none; }

.cart-page {
  max-width: 1100px;
  padding: 24px 0 48px;
}

.cart-toolbar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.cart-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8d9296;
  font-size: 0.76rem;
}

.cart-breadcrumb a { transition: color 0.2s ease; }
.cart-breadcrumb a:hover { color: var(--red-bright); }

.cart-breadcrumb svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cart-breadcrumb span { color: #d8dadc; }

.cart-continue-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d5d7d9;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.cart-continue-link > span { font-size: 1.25rem; }
.cart-continue-link:hover { color: var(--red-bright); }

.cart-page :is(a, button):focus-visible {
  outline: 2px solid #ff686e;
  outline-offset: 3px;
  border-radius: 4px;
}

.cart-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 20px;
}

.cart-panel,
.cart-summary {
  min-width: 0;
  background: #0e1114;
  border: 1px solid #272c31;
  border-radius: 12px;
}

.cart-panel { overflow: hidden; }

.cart-panel-heading {
  min-height: 60px;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #292e32;
}

.cart-panel-heading h2,
.cart-summary h2 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}

.cart-panel-heading h2 { display: flex; align-items: center; gap: 8px; }

.cart-panel-heading h2 span {
  min-width: 24px;
  padding: 1px 6px;
  color: #c9cdd1;
  background: #23272c;
  border-radius: 6px;
  text-align: center;
  font-size: 0.75rem;
}

.cart-clear-button,
.cart-remove-button {
  padding: 0;
  color: #909599;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.cart-clear-button {
  min-height: 44px;
  flex-shrink: 0;
  color: #acb0b5;
  font-size: 0.78rem;
}

.cart-clear-button:hover,
.cart-remove-button:hover { color: var(--red-bright); }
.cart-remove-button:hover { background: rgba(226, 30, 37, 0.1); }

.cart-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 44px;
  grid-template-areas: "cover details remove" "cover footer footer";
  grid-template-rows: 1fr auto;
  column-gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid #24292d;
}

.cart-item:last-child { border-bottom: 0; }

.cart-game-cover {
  grid-area: cover;
  align-self: start;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  box-shadow: none;
}

.cart-item-details {
  grid-area: details;
  min-width: 0;
  padding-top: 3px;
  overflow-wrap: anywhere;
}

.cart-platform {
  margin: 5px 0 0;
  color: #a1a7ae;
  font-size: 0.75rem;
  line-height: 1.5;
}

.cart-item h3 {
  margin: 0;
  color: #f0f1f2;
  font-size: 1rem;
  line-height: 1.4;
}

.cart-remove-button {
  grid-area: remove;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.cart-remove-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.cart-item-description {
  margin: 8px 0 0;
  color: #ff9297;
  font-size: 0.76rem;
}

.cart-item-footer {
  grid-area: footer;
  min-width: 0;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.cart-quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #aeb4bb;
  font-size: 0.75rem;
}

.cart-quantity button {
  min-height: 44px;
  padding: 6px 10px;
  color: #f2f3f4;
  background: transparent;
  border: 1px solid #3b4148;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.cart-quantity button:hover {
  color: #fff;
  background: rgba(226, 30, 37, 0.24);
}

.cart-quantity > span {
  padding: 5px 9px;
  background: #191d22;
  border: 1px solid #2a3036;
  border-radius: 6px;
  white-space: nowrap;
}

.cart-quantity strong { margin-left: 3px; color: #eef0f2; font-weight: 600; }

.cart-item-price {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cart-item-price del {
  color: #9da4ac;
  font-size: 0.75rem;
}

.cart-item-price strong {
  color: var(--red-bright);
  font-size: 1rem;
}

.cart-summary { padding: 20px; }

.cart-summary h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid #2b3034;
}

.voucher-form { margin: 19px 0 21px; }

.voucher-form label {
  display: block;
  margin-bottom: 8px;
  color: #b8bbbd;
  font-size: 0.73rem;
  font-weight: 700;
}

.voucher-form > div {
  display: flex;
  gap: 8px;
}

.voucher-form input {
  min-width: 0;
  width: 100%;
  height: 39px;
  padding: 0 11px;
  color: var(--text);
  background: #080a0c;
  border: 1px solid #363b3f;
  border-radius: 6px;
  outline: 0;
  font-size: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.voucher-form input:focus {
  border-color: rgba(255, 42, 49, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 42, 49, 0.1);
}

.voucher-form button {
  height: 39px;
  padding: 0 12px;
  color: #f4f4f4;
  background: #171b1e;
  border: 1px solid #42474a;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.voucher-form button:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.cart-summary-lines { margin: 0; }

.cart-summary-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 14px 0;
  color: #acb0b3;
  font-size: 0.82rem;
}

.cart-summary-lines dd {
  margin: 0;
  margin-left: auto;
  color: #e0e1e2;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cart-summary-lines .summary-discount { color: #6bd89a; }

.cart-summary-lines .cart-summary-total {
  margin: 16px 0 0;
  padding-top: 16px;
  color: #f2f3f4;
  border-top: 1px solid #34393d;
  font-size: 0.88rem;
  font-weight: 800;
}

.cart-summary-total dd {
  color: var(--red-bright);
  font-size: 1.2rem;
}

.cart-checkout-button {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  justify-content: space-between;
  padding-inline: 16px;
  text-transform: none;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.cart-checkout-button { border: 1px solid #f13a41; cursor: pointer; }
.cart-checkout-button:disabled { opacity: 0.65; cursor: wait; }

.cart-api-status {
  min-height: 0;
  margin: 8px 0 0;
  color: #a8afb6;
  text-align: center;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.cart-api-status:empty { margin: 0; }

.cart-api-status.is-error { color: #ff686e; }
.cart-api-status a { display: inline-flex; align-items: center; min-height: 44px; color: #ffb2b7; text-decoration: underline; text-underline-offset: 3px; }

.cart-feedback {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #353d45;
  border-radius: 8px;
  background: #151b20;
  color: #c7cfd6;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.cart-feedback[hidden] { display: none; }
.cart-feedback.is-error { border-color: #713b3f; background: #28181b; color: #ffb2b7; }
.cart-feedback:focus { outline: 2px solid #ff686e; outline-offset: 3px; }
.cart-checkout-issue { margin: 16px 0 0; color: #ffb2b7; font-size: 0.82rem; }
.cart-checkout-button:disabled:not([aria-busy="true"]) { cursor: not-allowed; }

.cart-payment-notice { margin: 18px 0; padding: 14px 16px; border: 1px solid #665033; border-radius: 10px; background: #292219; color: #f2d29d; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.cart-payment-notice p { margin: 0; }
.cart-payment-notice p + p { margin-top: 10px; }
.cart-payment-notice a { color: #fff0d3; text-decoration: underline; text-underline-offset: 3px; }

.cart-page.is-updating .cart-panel,
.cart-page.is-updating .cart-summary { opacity: 0.66; pointer-events: none; }

.cart-empty-state {
  min-height: 320px;
  padding: 36px 20px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(205, 22, 30, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(17, 20, 22, 0.97), rgba(7, 9, 10, 0.98));
  border: 1px dashed #363c40;
  border-radius: 11px;
}

.cart-empty-state > span {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: #e42b33;
  background: rgba(209, 24, 32, 0.1);
  border: 1px solid rgba(225, 38, 46, 0.25);
  border-radius: 50%;
}

.cart-empty-state svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.cart-empty-state h2 { margin: 17px 0 7px; color: #f0f2f2; font-size: 1.15rem; }
.cart-empty-state p { margin: 0 0 20px; color: #81898d; font-size: 0.76rem; }
.cart-empty-state .button b { margin-left: 5px; font-size: 1rem; }
.cart-item h3 a { color: inherit; }

.cart-secure-note {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cart-secure-note > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #9ba4ad;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.cart-secure-note p {
  margin: 0;
  color: #9ba4ad;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Promotion */
.promotion {
  position: relative;
  min-height: 112px;
  margin-top: 42px;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(3, 4, 5, 0.96) 0%, rgba(3, 4, 5, 0.68) 50%, rgba(3, 4, 5, 0.92) 100%),
    url("../images/home/hero-dc-gaming.png");
  background-size: cover;
  background-position: center 58%;
  border: 1px solid rgba(229, 29, 36, 0.75);
  border-radius: 7px;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.7);
}

.promotion::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 45%, rgba(229, 29, 36, 0.12) 46%, transparent 47%);
}

.promotion-copy,
.promotion .button {
  position: relative;
  z-index: 2;
}

.promotion-copy span,
.promotion-copy strong {
  display: block;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.promotion-copy span {
  color: #d5d5d6;
  font-size: 1.05rem;
}

.promotion-copy strong {
  margin-top: 2px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.promotion-copy b {
  margin-left: 7px;
  color: var(--red-bright);
  font-size: 1.45em;
  font-weight: inherit;
  text-shadow: 0 0 16px rgba(255, 42, 49, 0.28);
}

.promotion .button {
  min-width: 172px;
}

/* Categories */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.category-card {
  position: relative;
  min-height: 138px;
  padding: 19px 12px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, #101316, #080a0b 72%);
  border: 1px solid #45494d;
  border-radius: 7px;
  clip-path: polygon(9% 0, 91% 0, 100% 12%, 100% 88%, 91% 100%, 9% 100%, 0 88%, 0 12%);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(226, 30, 37, 0.18), transparent 54%);
  transition: opacity 0.25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--red-bright);
  background: linear-gradient(145deg, #161115, #090a0c 72%);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card svg {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(226, 30, 37, 0.35));
}

.category-card strong,
.category-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.category-card strong {
  font-size: 0.85rem;
  text-align: center;
  text-transform: uppercase;
}

.category-card small {
  margin-top: 3px;
  color: #aeb0b2;
  font-size: 0.75rem;
}

/* Why */
.why-section {
  margin-top: 54px;
  margin-bottom: 38px;
  padding: 38px 32px 28px;
  background: linear-gradient(100deg, rgba(12, 14, 16, 0.95), rgba(5, 6, 7, 0.97));
  border: 1px solid #41464a;
  border-bottom-color: rgba(226, 30, 37, 0.6);
  border-radius: 7px;
}

.why-section > h2 {
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -56px auto 28px;
  padding: 0 18px;
  background: var(--bg);
  text-align: center;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.why-section > h2 span {
  color: var(--red-bright);
  font-style: italic;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.why-grid article {
  min-height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-right: 1px solid #33373b;
}

.why-grid article:first-child {
  padding-left: 12px;
}

.why-grid article:last-child {
  border-right: 0;
}

.why-grid svg {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(226, 30, 37, 0.3));
}

.why-grid strong,
.why-grid small {
  display: block;
}

.why-grid strong {
  font-size: 1.3rem;
  text-transform: uppercase;
}

.why-grid small {
  margin-top: 2px;
  color: #aeb0b2;
  font-size: 0.76rem;
}

/* Footer */
.site-footer {
  position: relative;
  padding-top: 36px;
  border-top: 1px solid #f4524866;
  background: #0c0f11;
  color: #edf1f3;
  font-size: 14px;
  line-height: 1.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 32px;
}

.footer-grid > section { min-width: 0; }

.site-footer .footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  min-height: 64px;
}

.footer-logo img {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.footer-brand-copy { display: grid; gap: 5px; min-width: 0; }
.footer-wordmark { display: flex; align-items: baseline; gap: 6px; color: #f0f3f5; font-size: 23px; font-weight: 900; font-style: italic; letter-spacing: -.7px; line-height: 1.15; white-space: nowrap; }
.footer-wordmark > span { color: #f45248; }
.footer-tagline { max-width: 25ch; color: #aeb7bf; font-size: 14px; line-height: 1.5; }
.footer-brand > p { max-width: 34ch; margin: 12px 0 0; color: #aeb7bf; font-size: 14px; line-height: 1.65; }

.footer-support {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  margin-top: 22px;
  padding: 12px;
  border: 1px solid #2c3338;
  border-radius: 11px;
  background: #14191d;
  color: #e8edf0;
}
.footer-support-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 36px; color: #f45248; }
.footer-support-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-support-copy { display: grid; flex: 1 1 0; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.footer-support-copy > strong { color: #f0f3f5; font-size: 15px; font-weight: 650; line-height: 1.4; }
.footer-support-copy > span { color: #ff8f83; font-size: 14px; line-height: 1.5; }
.footer-support .footer-chevron { flex: 0 0 18px; width: 18px; height: 18px; color: #c5cdd3; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-support:hover { border-color: #7f514c; background: #1b2126; }

.footer-column h2, .footer-connect h2 { margin: 0 0 10px; color: #edf1f3; font-size: 15px; font-weight: 650; line-height: 1.5; }
.footer-column :is(a, .footer-link-unavailable) { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 7px 0; color: #b1bac2; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.footer-column a:hover { color: #ffaca4; text-decoration: underline; text-underline-offset: 4px; }

.site-footer .social-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-footer .social-list > :is(a, .footer-social-icon) { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #384149; border-radius: 10px; background: #14191d; color: #d6dfe5; }
.site-footer .social-list svg { width: 21px; height: 21px; fill: currentColor; }
.site-footer .social-list a:hover { border-color: #b66a62; background: #22282d; color: #ffaca4; }
.footer-connect .payment-title { margin-top: 24px; margin-bottom: 10px; }
.site-footer .payment-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-footer .footer-bank, .site-footer .payment-list > span { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 52px; padding: 11px 12px; border: 1px solid #2c3338; border-radius: 10px; background: #14191d; color: #c8d1d8; font-size: 14px; font-weight: 400; line-height: 1.5; }
.footer-bank > svg { flex: 0 0 23px; width: 23px; height: 23px; color: #e2e8ec; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.footer-bank > span { min-width: 0; overflow-wrap: anywhere; }

.site-footer .copyright { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; margin-top: 30px; padding: 16px 0; border-top: 1px solid #2c3338; color: #aab4bd; font-size: 14px; line-height: 1.5; }
.copyright > p { flex: 1 1 0; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.footer-back-to-top { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; color: #cbd4db; font-size: 14px; line-height: 1.5; }
.footer-top-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #384149; border-radius: 10px; background: #14191d; }
.footer-top-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-back-to-top:hover { color: #ffaca4; }
.footer-back-to-top:hover .footer-top-icon { border-color: #b66a62; }

@media (max-width: 767px) {
  .site-footer { padding-top: 26px; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .site-footer .footer-brand, .site-footer .footer-connect { display: block; grid-column: 1 / -1; }
  .footer-wordmark { font-size: clamp(20px, 5.7vw, 24px); }
  .footer-tagline { max-width: 27ch; }
  .site-footer .footer-brand > .footer-support { margin-top: 18px; }
  .footer-column h2, .footer-connect h2 { margin-bottom: 8px; }
  .footer-connect { padding-top: 22px; border-top: 1px solid #2c3338; }
  .site-footer .footer-connect > h2:first-child { margin: 0 0 8px; }
  .site-footer .footer-connect .payment-title { margin: 22px 0 8px; }
  .site-footer .copyright { gap: 10px; min-height: 76px; margin-top: 24px; padding-block: 14px; }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 1100px) {
  .profile-summary { grid-template-columns: minmax(0, 1fr); }
  .header-inner { gap: 0; }
  .main-nav { gap: 20px; }
  .search-box { width: 201px; }
  .trust-item { padding-inline: 18px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid article { padding-inline: 18px; }
  .footer-grid { gap: 24px; }
}

@media (max-width: 900px) {
  .site-header { height: 70px; }
  .header-inner { width: min(var(--shell), calc(100% - 48px)); }
  .site-header .header-brand { width: 108px; margin-right: 0; }
  .brand-logo { top: 1px; width: 92px; }
  .brand-crop { width: 92px; height: 58px; }
  .mobile-menu-toggle { order: 3; display: block; margin-left: 0; }
  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    height: auto;
    padding: 10px 22px 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(5, 6, 7, 0.98);
    border: 1px solid #303438;
    border-top: 0;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.open { display: flex; }
  .main-nav a { height: 46px; }
  .main-nav a::after { left: 0; bottom: 4px; transform: none; }
  .main-nav a:hover::after,
  .main-nav a.active::after { width: 32px; }
  .header-tools { order: 2; margin-left: auto; margin-right: 0; }
  .search-box { width: min(34vw, 240px); }
  .hero {
    min-height: max(470px, calc(100vh - 70px));
    min-height: max(470px, calc(100svh - 70px));
    background-position: center, center, 62% center;
  }
  .hero-copy { width: 68%; }
  .hero.hero-banner {
    width: min(var(--shell), calc(100% - 48px));
    min-height: 0;
  }
  .hero-banner-actions { bottom: 18%; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); clip-path: none; border-radius: 8px; }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item:nth-child(-n + 2) { border-bottom: 1px solid #34383c; }
  .game-track { grid-auto-columns: minmax(170px, 28%); }
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cart-content { grid-template-columns: 1fr; }
  .launcher-hero { grid-template-columns: minmax(0, 0.94fr) minmax(330px, 0.76fr); }
  .launcher-hero-copy { padding: 45px 16px 40px 38px; }
  .launcher-hero-art { padding-right: 24px; }
  .launcher-benefits article { padding-inline: 17px; }
  .launcher-requirements { grid-template-columns: 0.58fr 1.42fr; }
  .launcher-requirements dl > div { padding-inline: 12px; }
  .promotion-countdown { display: none; }
  .profile-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 12px; }
  .profile-stats article { padding: 13px; gap: 9px; }
  .profile-stat-icon { width: 33px; height: 33px; }
  .store-content { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
  .support-content { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid article:nth-child(2) { border-right: 0; }
  .why-grid article:nth-child(-n + 2) { padding-bottom: 18px; border-bottom: 1px solid #33373b; }
  .why-grid article:nth-child(n + 3) { padding-top: 18px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .footer-brand { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 32px; }
  .footer-brand > .footer-support { margin-top: 0; }
  .footer-connect { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 32px; }
  .footer-connect > h2:first-child { grid-column: 1; grid-row: 1; margin: 0; }
  .footer-connect > .social-list { grid-column: 1; grid-row: 2; }
  .footer-connect > .payment-title { grid-column: 2; grid-row: 1; margin: 0; }
  .footer-connect > .payment-list { grid-column: 2; grid-row: 2; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 28px, var(--shell)); }
  .site-header { height: 68px; }
  .header-inner {
    width: min(100% - 28px, var(--shell));
    gap: 0;
  }
  .site-header .header-brand { width: 92px; margin-right: 0; }
  .brand-logo { top: 1px; width: 84px; }
  .brand-crop { width: 78px; height: 49px; }
  .mobile-menu-toggle {
    position: absolute;
    right: 0;
    z-index: 4;
    width: 42px;
    height: 42px;
    padding: 9px;
    touch-action: manipulation;
  }
  .header-tools {
    position: absolute;
    right: 50px;
    gap: 8px;
    transform: none;
  }
  .search-box { display: none; }
  .round-button {
    width: 42px;
    height: 42px;
    touch-action: manipulation;
  }
  .main-nav {
    left: -14px;
    right: -14px;
    padding: 8px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
    border-inline: 0;
  }
  .main-nav a {
    min-height: 48px;
    font-size: 0.78rem;
  }
  .hero {
    min-height: max(570px, calc(100vh - 70px));
    min-height: max(570px, calc(100svh - 70px));
    align-items: flex-end;
    background-image:
      linear-gradient(0deg, rgba(3, 4, 5, 0.98) 0%, rgba(3, 4, 5, 0.82) 48%, rgba(3, 4, 5, 0.08) 85%),
      url("../images/home/hero-dc-gaming.png");
    background-size: cover;
    background-position: 68% center;
  }
  .hero::before { opacity: 0.45; }
  .hero.hero-banner {
    width: min(var(--shell), calc(100% - 28px));
    min-height: 0;
    aspect-ratio: auto;
    padding-bottom: 0;
  }
  .hero-banner-image {
    position: relative;
    inset: auto;
    height: auto;
    object-fit: contain;
  }
  .hero-banner-actions {
    display: none;
  }
  .hero-banner-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 10px;
    gap: 8px;
    white-space: nowrap;
    font-size: clamp(0.68rem, 2.6vw, 0.78rem);
  }
  .hero-banner-actions .button span { font-size: 1.3rem; }
  .hero-copy { width: 100%; padding-block: 210px 50px; }
  .eyebrow { font-size: 0.7rem; }
  .hero h1 { font-size: clamp(1.8rem, 7.8vw, 2.7rem); letter-spacing: -0.015em; }
  .hero-description { margin-block: 17px 22px; font-size: 0.95rem; }
  .button { min-height: 46px; padding-inline: 18px; font-size: 0.78rem; }
  .trust-strip { margin-top: 14px; padding: 10px 14px; }
  .trust-item { min-height: 74px; padding-inline: 8px; gap: 10px; }
  .trust-item:first-child { padding-left: 8px; }
  .trust-icon { width: 38px; height: 38px; }
  .trust-icon svg { width: 36px; height: 36px; }
  .trust-item strong { font-size: 0.74rem; }
  .trust-item small { font-size: 0.66rem; }
  .content-section { padding-top: 34px; }
  .profile-page { padding: 16px 0 28px; }
  .profile-hero { min-height: 0; padding: 16px; flex-wrap: wrap; gap: 12px; border-radius: 10px; }
  .profile-avatar { width: 58px; height: 58px; font-size: 1.45rem; box-shadow: 0 0 0 4px rgba(226, 30, 37, 0.1), 0 0 14px rgba(226, 30, 37, 0.27); }
  .profile-hero-info > p { font-size: 0.6rem; }
  .profile-hero-info > span { margin-top: 5px; font-size: 0.65rem; }
  .profile-hero-actions { width: 100%; margin-left: 0; align-items: flex-start; }
  .profile-hero-actions small { display: none; }
  .profile-layout { margin-top: 16px; display: block; }
  .profile-nav { padding: 8px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .profile-nav::-webkit-scrollbar { display: none; }
  .profile-nav > p { display: none; }
  .profile-nav a, .profile-nav button { width: auto; min-width: max-content; min-height: 37px; padding-inline: 8px; font-size: 0.71rem; }
  .profile-nav button { margin: 0; border: 0; }
  .profile-nav b { display: none; }
  .profile-content { margin-top: 12px; }
  .profile-stats { gap: 8px; }
  .profile-stats article { min-height: 74px; padding: 10px 8px; display: block; text-align: center; }
  .profile-stat-icon { width: 28px; height: 28px; margin: 0 auto 4px; }
  .profile-stat-icon svg { width: 16px; height: 16px; }
  .profile-stats p { font-size: 0.59rem; }
  .profile-stats strong { margin-top: 2px; font-size: 0.75rem; }
  .profile-panel, .profile-library-preview { margin-top: 0; padding: 14px; border-radius: 9px; }
  .profile-panel-heading { padding-bottom: 10px; }
  .profile-panel-heading h2 { font-size: 0.9rem; }
  .profile-details { grid-template-columns: 1fr; }
  .profile-details > div, .profile-details > div:nth-child(even) { min-height: 0; padding: 10px 0; border-left: 0; border-bottom: 1px solid #292e32; }
  .profile-details > div:last-child { border-bottom: 0; }
  .profile-orders-table { margin-right: -14px; padding-right: 14px; }
  .profile-library-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; }
  .promotions-page { padding: 28px 0 52px; }
  .promotions-hero { border-radius: 8px; }
  .promotion-perks { margin-top: 10px; padding: 8px 12px; display: grid; grid-template-columns: 1fr; gap: 4px; justify-items: start; }
  .promotion-perks span { min-height: 25px; padding: 0; border-right: 0; font-size: 0.71rem; }
  .promotion-deals { margin-top: 28px; }
  .promotion-section-heading { margin-bottom: 14px; }
  .promotion-section-heading h2 { font-size: 1.05rem; }
  .promotion-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 14px; }
  .promotion-game-info { margin-top: 8px; font-size: 0.65rem; }
  .promotion-game-card h3 { min-height: 37px; font-size: 0.77rem; }
  .promotion-discount { top: 6px; right: 6px; min-width: 37px; padding: 3px; font-size: 0.6rem; }
  .promotion-coupons { margin-top: 32px; padding: 22px 16px; grid-template-columns: 1fr; gap: 20px; border-radius: 9px; }
  .promotion-coupon-copy > span { max-width: none; font-size: 0.71rem; }
  .promotion-code-list article { padding-left: 13px; }
  .launcher-page { padding: 28px 0 52px; }
  .launcher-hero { min-height: 0; display: block; border-radius: 10px; }
  .launcher-hero-copy { padding: 36px 17px 30px; }
  .launcher-description { margin: 14px 0 18px; font-size: 0.8rem; }
  .launcher-meta { gap: 12px; }
  .launcher-meta span { font-size: 0.66rem; }
  .launcher-meta span + span { padding-left: 12px; }
  .launcher-actions { margin-top: 22px; display: grid; gap: 15px; }
  .launcher-download-button { width: 100%; }
  .launcher-requirements-link { justify-self: center; }
  .launcher-download-note { font-size: 0.64rem; text-align: center; }
  .launcher-hero-art { display: none; }
  .launcher-benefits { margin-top: 16px; grid-template-columns: 1fr; }
  .launcher-benefits article { min-height: 0; padding: 16px; }
  .launcher-benefits article + article { border-top: 1px solid #2c3135; border-left: 0; }
  .launcher-requirements { margin-top: 16px; padding: 18px 16px; grid-template-columns: 1fr; gap: 18px; }
  .launcher-requirements dl { grid-template-columns: 1fr; }
  .launcher-requirements dl > div { min-height: 0; padding: 11px 0; border-top: 1px solid #2c3135; border-left: 0; }
  .launcher-requirements dl > div:last-child { padding-bottom: 0; }
  .store-page { padding: 28px 0 52px; }
  .store-banner { margin-bottom: 18px; }
  .store-banner { display: none; }
  .store-mobile-search {
    height: 44px;
    margin-bottom: 18px;
    padding: 0 5px 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #aeb3b6;
    background: linear-gradient(180deg, #101315, #090b0d);
    border: 1px solid #32363a;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 6px 16px rgba(0, 0, 0, 0.18);
  }
  .store-mobile-search:focus-within { border-color: rgba(255, 42, 49, 0.75); box-shadow: 0 0 0 3px rgba(255, 42, 49, 0.1); }
  .store-mobile-search > svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
  .store-mobile-search input { width: 100%; min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 0.78rem; }
  .store-mobile-search input::placeholder { color: #8a8e92; }
  .store-mobile-search button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #dc2027, #a80d13); border: 1px solid #f13a41; border-radius: 6px; cursor: pointer; }
  .store-mobile-search button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
  .store-page-heading { padding-bottom: 22px; display: block; }
  .store-heading-stat { display: none; }
  .store-toolbar { min-height: 0; padding: 10px 12px; flex-wrap: wrap; row-gap: 8px; }
  .store-toolbar > p { width: 100%; }
  .store-toolbar-actions { width: 100%; justify-content: space-between; }
  .store-mobile-filter {
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e5e6e7;
    background: #15191c;
    border: 1px solid #3a3f43;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .store-mobile-filter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
  .store-sort span { display: none; }
  .store-content { display: block; margin-top: 0; }
  .store-filters { display: none; }
  .store-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .store-game-card h2 { margin-top: 9px; font-size: 0.77rem; }
  .support-page { padding: 28px 0 52px; }
  .support-hero { padding: 38px 16px 28px; border-radius: 10px; }
  .support-hero > p:not(.support-kicker) { margin: 10px 0 18px; font-size: 0.78rem; }
  .support-search { height: 44px; padding-left: 11px; }
  .support-search button { height: 32px; padding-inline: 10px; font-size: 0.67rem; }
  .support-contact-grid { margin-top: 16px; grid-template-columns: 1fr; gap: 10px; }
  .support-contact-card { min-height: 0; padding: 16px; }
  .support-contact-card p { min-height: 0; margin-bottom: 5px; }
  .support-content { margin-top: 18px; gap: 16px; }
  .support-faq, .support-ticket { padding: 17px 15px; border-radius: 9px; }
  .faq-list { margin-top: 12px; }
  .faq-list summary { min-height: 52px; font-size: 0.76rem; }
  .faq-list details p { margin-right: 0; font-size: 0.72rem; }
  .cart-page { padding: 12px 0 max(28px, env(safe-area-inset-bottom)); }
  .cart-toolbar { margin-bottom: 10px; gap: 0 8px; }
  .cart-breadcrumb, .cart-continue-link { font-size: 0.72rem; }
  .cart-content { gap: 14px; }
  .cart-panel-heading { min-height: 56px; padding: 4px 14px; }
  .cart-item {
    grid-template-columns: 96px minmax(0, 1fr) 44px;
    grid-template-areas: "cover details remove" "footer footer footer";
    column-gap: 10px;
    padding: 16px 14px;
  }
  .cart-item h3 { font-size: 0.93rem; }
  .cart-platform { font-size: 0.72rem; }
  .cart-item-footer { margin-top: 12px; }
  .cart-summary { padding: 18px 16px; }
  .cart-empty-state { min-height: 300px; padding: 28px 16px; }
  .section-heading { margin-bottom: 14px; }
  .section-heading h2 { font-size: 1.04rem; }
  .section-heading > a { font-size: 0.68rem; }
  .game-track { grid-auto-columns: 48%; gap: 14px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .game-card h3 { font-size: 0.77rem; }
  .carousel-arrow { display: none; }
  .featured-promotion {
    min-height: 0;
    aspect-ratio: auto;
    margin-top: 30px;
    padding-bottom: 0;
  }
  .featured-promotion img {
    position: relative;
    height: auto;
    aspect-ratio: 4.7 / 1;
    object-fit: contain;
  }
  .featured-promotion::after { background: linear-gradient(180deg, transparent 18%, rgba(0, 0, 0, 0.7) 100%); }
  .featured-promotion-cta {
    top: auto;
    right: 10px;
    bottom: 8px;
    min-width: 126px;
    min-height: 34px;
    font-size: 0.68rem;
  }
  .promotion {
    min-height: 150px;
    margin-top: 34px;
    padding: 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .promotion-copy strong { font-size: 1.45rem; }
  .promotion .button { min-width: 145px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .category-card { min-height: 126px; }
  .category-card svg { width: 42px; height: 42px; }
  .why-section { margin-top: 52px; padding: 36px 14px 20px; clip-path: none; border-radius: 8px; }
  .why-section > h2 { margin-top: -52px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid article,
  .why-grid article:first-child,
  .why-grid article:nth-child(n + 3) {
    padding: 14px 8px;
    border-right: 0;
    border-bottom: 1px solid #33373b;
  }
  .why-grid article:last-child { border-bottom: 0; }
  .why-grid svg { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .hero-banner-actions .button { font-size: 0.78rem; }
}

@media (max-width: 350px) {
  .site-header .header-brand { width: 82px; }
  .brand-logo { width: 78px; }
  .header-tools { right: 48px; gap: 5px; }
  .round-button,
  .mobile-menu-toggle { width: 40px; height: 40px; }
}

@media (hover: none) and (pointer: coarse) {
  .button:hover,
  .round-button:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .screen-red-streaks { display: none; }
}

/* Authentication */
.auth-page {
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  padding: 52px 0;
  display: grid;
  place-items: center;
}

.auth-layout {
  width: min(100%, 920px);
  min-height: 565px;
  display: grid;
  grid-template-columns: minmax(280px, 0.83fr) minmax(390px, 1fr);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 18, 20, 0.98), rgba(5, 7, 8, 0.98));
  border: 1px solid #303539;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.auth-showcase {
  position: relative;
  isolation: isolate;
  padding: 50px 42px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(48, 5, 9, 0.88), rgba(8, 10, 12, 0.96) 64%),
    radial-gradient(circle at 20% 18%, rgba(255, 35, 43, 0.65), transparent 30%);
}

.auth-showcase::before,
.auth-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.auth-showcase::before {
  width: 360px;
  height: 360px;
  top: -108px;
  left: -165px;
  border: 1px solid rgba(255, 56, 64, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 28, 37, 0.05), 0 0 0 82px rgba(255, 28, 37, 0.035);
}

.auth-showcase::after {
  width: 310px;
  height: 1px;
  top: 35%;
  right: -88px;
  background: linear-gradient(90deg, transparent, #ff2d35, transparent);
  transform: rotate(-37deg);
  box-shadow: 0 34px 0 rgba(233, 26, 34, 0.24), 0 68px 0 rgba(233, 26, 34, 0.12);
}

.auth-showcase-mark {
  position: absolute;
  top: 40px;
  left: 40px;
  color: rgba(255, 255, 255, 0.1);
  font-size: 5.9rem;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -0.12em;
  line-height: 1;
}

.auth-showcase > p,
.auth-kicker {
  margin: 0;
  color: #ff4249;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.auth-showcase h2 {
  margin: 11px 0 13px;
  max-width: 300px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.auth-showcase > span:not(.auth-showcase-mark) {
  max-width: 250px;
  color: #aeb5b9;
  font-size: 0.78rem;
  line-height: 1.65;
}

.auth-showcase-line {
  width: 66px;
  height: 2px;
  margin-top: 24px;
  background: linear-gradient(90deg, #ef232b, #6f0a0f 80%, transparent);
  box-shadow: 0 0 10px rgba(255, 31, 41, 0.72);
}

.auth-card {
  padding: 47px 52px 42px;
  background: linear-gradient(145deg, rgba(17, 21, 23, 0.92), rgba(7, 9, 10, 0.97));
}

.auth-brand {
  width: 114px;
  height: 28px;
  margin-bottom: 40px;
  display: block;
}

.auth-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.auth-card h1 {
  margin: 7px 0 0;
  color: #fff;
  font-size: 1.72rem;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.auth-description {
  margin: 10px 0 26px;
  color: #a5aaad;
  font-size: 0.78rem;
  line-height: 1.6;
}

.auth-description strong { color: #e5e8e9; font-weight: 700; }

.auth-form { display: grid; gap: 15px; }

.auth-form > label { display: grid; gap: 7px; }

.auth-form > label > span {
  color: #d7dadd;
  font-size: 0.7rem;
  font-weight: 800;
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  height: 45px;
  padding: 0 13px;
  color: #f5f6f6;
  outline: 0;
  background: #090b0c;
  border: 1px solid #363b3f;
  border-radius: 7px;
  font: inherit;
  font-size: 0.78rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-form input:not([type="checkbox"])::placeholder { color: #696f73; }

.auth-form input:not([type="checkbox"]):focus {
  background: #0b0e10;
  border-color: rgba(255, 45, 54, 0.9);
  box-shadow: 0 0 0 3px rgba(237, 30, 39, 0.1);
}

.auth-form small { min-height: 13px; color: #ff757b; font-size: 0.63rem; line-height: 1.25; }

.auth-form-row {
  margin-top: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.auth-form-row > a,
.auth-switch a,
.auth-check a,
.auth-resend button {
  color: #f13b43;
  text-decoration: none;
  font-size: 0.69rem;
  font-weight: 750;
}

.auth-form-row > a:hover,
.auth-switch a:hover,
.auth-check a:hover,
.auth-resend button:hover { color: #ff7b80; }

.auth-check {
  display: inline-flex !important;
  align-items: flex-start;
  gap: 7px;
  color: #a6abad;
  font-size: 0.68rem;
  line-height: 1.4;
  cursor: pointer;
}

.auth-check input {
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  accent-color: #df1d26;
}

.auth-check span { color: inherit !important; font-size: inherit !important; font-weight: 500 !important; }
.auth-terms { margin-top: -2px; }
.auth-inline-error { margin-top: -11px; }

.auth-submit {
  min-height: 46px;
  margin-top: 2px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  background: linear-gradient(180deg, #e9262f, #ad1118);
  border: 1px solid #fa4850;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(185, 15, 23, 0.2);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.auth-submit:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 23px rgba(208, 17, 27, .3); }
.auth-submit span { font-size: 1.32rem; line-height: 0; }

.auth-switch {
  margin: 24px 0 0;
  color: #91979b;
  text-align: center;
  font-size: 0.7rem;
}

.auth-switch > span { margin-inline: 7px; color: #52575a; }

.auth-validation:empty { display: none; }
.auth-validation,
.auth-alert {
  margin: 0 0 17px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.7rem;
  line-height: 1.45;
}

.auth-validation {
  color: #ff9ca0;
  background: rgba(219, 30, 39, 0.1);
  border: 1px solid rgba(240, 50, 58, 0.32);
}

.auth-validation ul { margin: 0; padding-left: 16px; }
.auth-alert.success { color: #c3e6d0; background: rgba(48, 167, 101, 0.12); border: 1px solid rgba(72, 194, 119, 0.33); }
.auth-alert.error { color: #ff9ca0; background: rgba(219, 30, 39, 0.1); border: 1px solid rgba(240, 50, 58, 0.32); }

.auth-page-compact { padding-block: 42px; }
.auth-card-compact {
  width: min(100%, 462px);
  padding: 42px 48px 38px;
  background: linear-gradient(145deg, rgba(17, 21, 23, 0.98), rgba(7, 9, 10, 0.98));
  border: 1px solid #303539;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.auth-card-compact .auth-brand { margin-bottom: 27px; }
.auth-card-compact h1 { text-align: center; }
.auth-card-compact > .auth-kicker { text-align: center; }
.auth-card-compact > .auth-description { max-width: 330px; margin-inline: auto; text-align: center; }

.auth-step-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 19px;
  display: grid;
  place-items: center;
  color: #ff5a61;
  background: radial-gradient(circle, rgba(244, 31, 41, 0.2), rgba(156, 11, 18, 0.08));
  border: 1px solid rgba(249, 67, 76, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(236, 24, 34, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-step-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.auth-otp-form { gap: 10px; }
.auth-otp-input {
  height: 52px !important;
  padding-left: 20px !important;
  text-align: center;
  letter-spacing: 0.48em;
  font-size: 1.18rem !important;
  font-weight: 850;
}
.auth-otp-note { margin: 0 0 7px; color: #81878b; text-align: center; font-size: 0.65rem; }
.auth-resend { margin-top: 21px; display: flex; justify-content: center; gap: 5px; color: #90969a; font-size: 0.68rem; }
.auth-resend button { padding: 0; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.auth-reset-form { gap: 10px; }

.profile-logout-form { width: 100%; margin: 0; }

/* Shared request feedback overlay */
.app-loading-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 4, 5, 0.78);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.app-loading-overlay[hidden] { display: none !important; }

.app-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app-loading-dialog {
  width: min(100%, 330px);
  padding: 34px 28px 30px;
  color: #f7f7f8;
  text-align: center;
  background: linear-gradient(145deg, rgba(22, 25, 28, 0.98), rgba(8, 10, 12, 0.99));
  border: 1px solid #3a3f44;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.62), 0 0 34px rgba(225, 19, 27, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.app-loading-mark {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}

.app-loading-mark img {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.app-loading-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(226, 22, 31, 0.2);
  border-top-color: #ff434b;
  border-right-color: #d5161e;
  border-radius: 50%;
  box-shadow: 0 0 23px rgba(231, 20, 29, 0.3);
  animation: app-loading-spin 0.9s linear infinite;
}

.app-loading-kicker {
  margin: 0 0 8px;
  color: #ff4249;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.app-loading-title {
  margin: 0;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
}

.app-loading-detail {
  margin: 9px 0 0;
  color: #9ea5ab;
  font-size: 0.72rem;
  line-height: 1.5;
}

body.is-loading { overflow: hidden; }
form.is-loading-submit button[type="submit"] { cursor: wait; }
form.is-loading-submit button[type="submit"] span { opacity: 0.5; }

@keyframes app-loading-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .app-loading-overlay { padding: 16px; }
  .app-loading-dialog { width: min(100%, 300px); padding: 29px 22px 26px; }
  .app-loading-mark { width: 66px; height: 66px; }
  .app-loading-mark img { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-overlay { transition: none; }
  .app-loading-ring { animation-duration: 1.8s; }
}

@media (max-width: 700px) {
  .auth-page { min-height: calc(100svh - 64px); padding: 26px 0 36px; }
  .auth-layout { width: min(100%, 490px); min-height: 0; grid-template-columns: 1fr; border-radius: 10px; }
  .auth-showcase { display: none; }
  .auth-card { padding: 32px 25px 28px; }
  .auth-brand { width: 101px; height: 25px; margin-bottom: 31px; }
  .auth-card h1 { font-size: 1.48rem; }
  .auth-description { margin-bottom: 22px; font-size: 0.74rem; }
  .auth-card-compact { width: min(100%, 460px); padding: 30px 23px 27px; border-radius: 10px; }
  .auth-card-compact .auth-brand { margin-bottom: 23px; }
  .auth-step-icon { width: 43px; height: 43px; margin-bottom: 15px; }
  .auth-form { gap: 12px; }
  .auth-form input:not([type="checkbox"]) { height: 43px; }
  .auth-form-row { align-items: flex-start; }
  .auth-submit { min-height: 44px; }
  .auth-otp-input { height: 49px !important; }
  .profile-logout-form { width: auto; display: contents; }
}