/* Fantech animated gaming hero for category and product pages. */
.ft-gh-custom-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.ft-gh [hidden] { display: none !important; }
.ft-gh [data-ft-generated-art] { width: 100%; height: 100%; }
.ft-gh {
  --gh-red: var(--ft-red, #ed1c24);
  --gh-wine: #8b1a2b;
  --gh-ink: #0b0b0e;
  --gh-line: #ffffff1a;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--gh-ink);
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 3px solid var(--gh-red);
}
.ft-gh *, .ft-gh *::before, .ft-gh *::after { box-sizing: border-box; }

/* Background layers */
.ft-gh-bg, .ft-gh-bg i { position: absolute; inset: 0; pointer-events: none; }
.ft-gh-bg { z-index: -1; }
.ft-gh-grid {
  background-image: linear-gradient(var(--gh-line) 1px, transparent 1px), linear-gradient(90deg, var(--gh-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 75%);
  animation: ft-gh-grid 9s linear infinite;
}
.ft-gh-glow {
  background: radial-gradient(circle at 72% 48%, #ed1c2455 0%, transparent 42%), radial-gradient(circle at 12% 110%, #8b1a2b88 0%, transparent 45%);
  animation: ft-gh-glow 7s ease-in-out infinite alternate;
}
.ft-gh-scan {
  height: 120px;
  inset: auto 0 auto 0;
  background: linear-gradient(180deg, transparent, #ffffff10, transparent);
  animation: ft-gh-scan 5.5s linear infinite;
}

.ft-gh-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 32px;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
}

/* Copy */
.ft-gh-copy > * { animation: ft-gh-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.ft-gh-copy > :nth-child(2) { animation-delay: .08s; }
.ft-gh-copy > :nth-child(3) { animation-delay: .16s; }
.ft-gh-copy > :nth-child(4) { animation-delay: .24s; }
.ft-gh-copy > :nth-child(5) { animation-delay: .32s; }
.ft-gh .ft-gh-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #c9c9d1;
  font: 700 12px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.ft-gh-live { width: 9px; height: 9px; border-radius: 50%; background: var(--gh-red); box-shadow: 0 0 0 0 #ed1c24aa; animation: ft-gh-live 1.6s ease-out infinite; }
.ft-gh .ft-gh-cat {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border: 1px solid #ffffff33;
  border-left: 3px solid var(--gh-red);
  color: #fff;
  font: 700 13px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #ffffff0d;
}
.ft-gh .ft-gh-title {
  margin: 0 0 16px;
  color: #fff;
  font-family: "Montserrat Alternates", Oxanium, Arial, sans-serif;
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.5px;
  text-transform: uppercase;
}
.ft-gh-title em {
  position: relative;
  display: inline-block;
  color: var(--gh-red);
  font-style: normal;
  text-shadow: 0 0 24px #ed1c2466;
}
.ft-gh-title em::before, .ft-gh-title em::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ft-gh-title em::before { color: #ff5a64; clip-path: inset(0 0 60% 0); animation: ft-gh-glitch 3.2s steps(1) infinite; }
.ft-gh-title em::after { color: #7d0d1b; clip-path: inset(55% 0 0 0); animation: ft-gh-glitch 3.2s steps(1) .15s infinite reverse; }
.ft-gh .ft-gh-text { max-width: 470px; margin: 0 0 24px; color: #b8b8c2; font-size: 15px; line-height: 1.7; }
.ft-gh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ft-store .ft-gh a.ft-gh-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  color: #fff;
  background: var(--gh-red);
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%);
  transition: background .2s, transform .2s;
}
.ft-store .ft-gh a.ft-gh-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, #ffffff66, transparent);
  animation: ft-gh-sweep 3s ease-in-out infinite;
}
.ft-store .ft-gh a.ft-gh-btn:hover { color: #fff; background: var(--gh-wine); transform: translateY(-2px); }
.ft-gh-hud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ft-gh-hud li {
  padding: 6px 10px;
  border: 1px solid #ffffff26;
  color: #e4e4ea;
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: 1px;
  background: #00000066;
  animation: ft-gh-blink 2.4s ease-in-out infinite;
}
.ft-gh-hud li:nth-child(2) { animation-delay: .8s; }
.ft-gh-hud li:nth-child(3) { animation-delay: 1.6s; color: #ff6b73; border-color: #ed1c2466; }

/* Stage */
.ft-gh-stage { position: relative; aspect-ratio: 15 / 8; width: 100%; max-width: 640px; justify-self: end; }
.ft-gh-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ft-gh-corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--gh-red); z-index: 2; }
.ft-gh-corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ft-gh-corner--br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.ft-gh-dark { fill: #1b1b21; stroke: #ffffff40; stroke-width: 1.5; }
.ft-gh-red { fill: var(--gh-red); }
.ft-gh-band { fill: none; stroke: #e9e9ef; stroke-width: 10; stroke-linecap: round; }

/* FPS: gun, muzzle flash, tracers, reticle, fire */
.ft-gh-soldier { transform-box: fill-box; transform-origin: 30% 85%; animation: ft-gh-recoil 1.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.ft-gh-soldier image { filter: brightness(.88) contrast(1.15) saturate(.8) drop-shadow(0 0 2px rgba(255, 90, 60, .55)) drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.ft-gh-flash { fill: #ffd25a; filter: drop-shadow(0 0 10px #ff8a00) drop-shadow(0 0 22px #ed1c24); opacity: 0; transform-box: fill-box; transform-origin: left center; animation: ft-gh-flash 1.2s steps(1) infinite; }
.ft-gh-tracers line { stroke: #ffb347; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 22 200; stroke-dashoffset: 22; filter: drop-shadow(0 0 4px #ff6a00); animation: ft-gh-tracer 1.2s linear infinite; }
.ft-gh-tracers line:nth-child(2) { animation-delay: .4s; }
.ft-gh-tracers line:nth-child(3) { animation-delay: .8s; }
.ft-gh-reticle { animation: ft-gh-aim 4s ease-in-out infinite; }
.ft-gh-reticle circle, .ft-gh-reticle line { fill: none; stroke: var(--gh-red); stroke-width: 3; }
.ft-gh-reticle .ft-gh-thin { stroke-width: 1.5; stroke-dasharray: 6 6; animation: ft-gh-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.ft-gh-reticle .ft-gh-dot { fill: var(--gh-red); }
.ft-gh-hit line { stroke: #fff; stroke-width: 3; opacity: 0; animation: ft-gh-hit 1.2s steps(1) infinite; }
.ft-gh-fire { position: absolute; left: 0; right: 0; bottom: -8%; height: 46%; filter: blur(14px); opacity: .85; }
.ft-gh-fire i { position: absolute; bottom: 0; width: 26%; height: 100%; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 90%, #ffcf4a 0%, #ff6a00 30%, #ed1c24 55%, transparent 72%); transform-origin: bottom center; animation: ft-gh-flame 1.4s ease-in-out infinite alternate; }
.ft-gh-fire i:nth-child(1) { left: -4%; animation-delay: -.2s; }
.ft-gh-fire i:nth-child(2) { left: 18%; height: 80%; animation-delay: -.7s; }
.ft-gh-fire i:nth-child(3) { left: 40%; animation-delay: -.4s; }
.ft-gh-fire i:nth-child(4) { left: 60%; height: 75%; animation-delay: -1s; }
.ft-gh-fire i:nth-child(5) { left: 80%; animation-delay: -.1s; }
.ft-gh-embers i { position: absolute; bottom: 4%; width: 4px; height: 4px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px #ff6a00; opacity: 0; animation: ft-gh-ember 3.2s linear infinite; }
.ft-gh-embers i:nth-child(1) { left: 6%; }
.ft-gh-embers i:nth-child(2) { left: 16%; animation-delay: .5s; }
.ft-gh-embers i:nth-child(3) { left: 27%; animation-delay: 1.4s; }
.ft-gh-embers i:nth-child(4) { left: 38%; animation-delay: .9s; }
.ft-gh-embers i:nth-child(5) { left: 49%; animation-delay: 2.1s; }
.ft-gh-embers i:nth-child(6) { left: 58%; animation-delay: .2s; }
.ft-gh-embers i:nth-child(7) { left: 67%; animation-delay: 1.7s; }
.ft-gh-embers i:nth-child(8) { left: 76%; animation-delay: 2.6s; }
.ft-gh-embers i:nth-child(9) { left: 86%; animation-delay: 1.1s; }
.ft-gh-embers i:nth-child(10) { left: 94%; animation-delay: 2.9s; }
.ft-gh-ammo { position: absolute; right: 4%; top: 6%; display: flex; align-items: baseline; gap: 6px; font: 800 30px/1 "Courier New", monospace; color: #fff; text-shadow: 0 0 12px #ed1c24; z-index: 2; }
.ft-gh-ammo span { font-size: 14px; color: #aaa; }

/* Arcade: controller, buttons, combo, health bar */
.ft-gh-pad { fill: #17171c; stroke: #ffffff4d; stroke-width: 2; animation: ft-gh-float 4s ease-in-out infinite; }
.ft-gh-dpad rect { fill: #2a2a32; stroke: #ffffff33; }
.ft-gh-dpad { animation: ft-gh-float 4s ease-in-out infinite; }
.ft-gh-abxy circle { fill: #2a2a32; stroke: #ffffff40; stroke-width: 1.5; animation: ft-gh-press 2.4s steps(1) infinite; }
.ft-gh-abxy circle:nth-child(2) { animation-delay: .6s; }
.ft-gh-abxy circle:nth-child(3) { animation-delay: 1.2s; }
.ft-gh-abxy circle:nth-child(4) { animation-delay: 1.8s; }
.ft-gh-stick { fill: #24242b; stroke: var(--gh-red); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ft-gh-stick 2.8s ease-in-out infinite; }
.ft-gh-stick--r { animation-direction: reverse; }
.ft-gh-combo { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.ft-gh-combo span { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #ffffff40; color: #fff; font: 800 16px/1 Arial, sans-serif; background: #0009; animation: ft-gh-combo 2.5s steps(1) infinite; }
.ft-gh-combo span:nth-child(2) { animation-delay: .25s; }
.ft-gh-combo span:nth-child(3) { animation-delay: .5s; }
.ft-gh-combo span:nth-child(4) { animation-delay: .75s; }
.ft-gh-combo span:nth-child(5) { animation-delay: 1s; }
.ft-gh-bar { position: absolute; left: 4%; top: 6%; width: 38%; height: 12px; border: 1px solid #ffffff55; background: #0008; z-index: 2; }
.ft-gh-bar i { position: absolute; inset: 2px auto 2px 2px; background: linear-gradient(90deg, var(--gh-wine), var(--gh-red)); animation: ft-gh-health 3s ease-in-out infinite; }
.ft-gh-pixels i { position: absolute; width: 8px; height: 8px; background: var(--gh-red); box-shadow: 8px 0 #ffffff55, 0 8px #ffffff33; animation: ft-gh-pixel 5s linear infinite; }
.ft-gh-pixels i:nth-child(1) { left: 6%; top: 70%; }
.ft-gh-pixels i:nth-child(2) { left: 18%; top: 20%; animation-delay: -1s; }
.ft-gh-pixels i:nth-child(3) { left: 32%; top: 85%; animation-delay: -2s; }
.ft-gh-pixels i:nth-child(4) { left: 52%; top: 10%; animation-delay: -3s; }
.ft-gh-pixels i:nth-child(5) { left: 68%; top: 78%; animation-delay: -4s; }
.ft-gh-pixels i:nth-child(6) { left: 82%; top: 30%; animation-delay: -.5s; }
.ft-gh-pixels i:nth-child(7) { left: 92%; top: 60%; animation-delay: -2.5s; }
.ft-gh-pixels i:nth-child(8) { left: 44%; top: 50%; animation-delay: -3.5s; }

/* Audio: headset, radar, equalizer */
.ft-gh--audio .ft-gh-art { animation: ft-gh-float 4.5s ease-in-out infinite; }
.ft-gh-mic { stroke-width: 5; }
.ft-gh-waves path { fill: none; stroke: var(--gh-red); stroke-width: 3; stroke-linecap: round; animation: ft-gh-wave 1.6s ease-out infinite; }
.ft-gh-waves path:nth-child(2n) { animation-delay: .4s; }
.ft-gh-radar { position: absolute; right: 2%; top: 4%; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #ed1c2488; background: repeating-radial-gradient(circle, transparent 0 14px, #ed1c2433 15px 16px); overflow: hidden; z-index: 2; }
.ft-gh-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, #ed1c2499, transparent 25%); animation: ft-gh-spin 2.6s linear infinite; }
.ft-gh-radar b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--gh-red); opacity: 0; animation: ft-gh-ping 2.6s ease-out infinite; }
.ft-gh-radar b:nth-of-type(1) { left: 30%; top: 28%; }
.ft-gh-radar b:nth-of-type(2) { left: 64%; top: 58%; animation-delay: .9s; }
.ft-gh-radar b:nth-of-type(3) { left: 40%; top: 70%; animation-delay: 1.7s; }
.ft-gh-eq { position: absolute; left: 4%; right: 4%; bottom: 0; height: 22%; display: flex; align-items: flex-end; gap: 4px; }
.ft-gh-eq i { flex: 1; height: 100%; background: linear-gradient(0deg, var(--gh-wine), var(--gh-red) 60%, #ff8a8f); transform-origin: bottom; animation: ft-gh-eq .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }

/* Station: neon floor, sun, monitor */
.ft-gh-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; transform: perspective(300px) rotateX(62deg); transform-origin: bottom; background-image: linear-gradient(#ed1c24aa 2px, transparent 2px), linear-gradient(90deg, #ed1c24aa 2px, transparent 2px); background-size: 48px 48px; mask-image: linear-gradient(0deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); animation: ft-gh-floor 1.6s linear infinite; }
.ft-gh-sun { position: absolute; left: 50%; top: 4%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 8px, #0b0b0e 8px 11px), linear-gradient(180deg, #ff5a64, var(--gh-wine)); opacity: .55; filter: blur(.5px); }
.ft-gh-screen { fill: #120a0d; stroke: var(--gh-red); stroke-width: 1.5; animation: ft-gh-screen 3s ease-in-out infinite; }
.ft-gh--station .ft-gh-band { stroke: var(--gh-red); stroke-width: 4; stroke-dasharray: 360; animation: ft-gh-draw 3s ease-in-out infinite; }
.ft-gh-rgb { animation: ft-gh-rgb 3s linear infinite; }

/* Power: battery, bolt, rings */
.ft-gh-charge { fill: var(--gh-red); transform-box: fill-box; transform-origin: left center; animation: ft-gh-charge 3s ease-in-out infinite; }
.ft-gh-bolt { fill: #fff; filter: drop-shadow(0 0 10px #ed1c24); animation: ft-gh-bolt 1.8s steps(1) infinite; }
.ft-gh-rings i { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; border: 2px solid #ed1c2488; border-radius: 50%; transform: translate(-50%, -50%) scale(.4); opacity: 0; animation: ft-gh-ring 3s ease-out infinite; }
.ft-gh-rings i:nth-child(2) { animation-delay: 1s; }
.ft-gh-rings i:nth-child(3) { animation-delay: 2s; }
.ft-gh-percent { position: absolute; right: 4%; top: 6%; font: 800 30px/1 "Courier New", monospace; color: #fff; text-shadow: 0 0 12px #ed1c24; z-index: 2; }

/* Compact variant on product pages */
.ft-gh--compact .ft-gh-wrap { min-height: 0; padding-top: 26px; padding-bottom: 26px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ft-gh--compact .ft-gh-title { font-size: clamp(26px, 3vw, 40px); }
.ft-gh--compact .ft-gh-text { display: none; }
.ft-gh--compact .ft-gh-stage { max-width: 420px; }

/* Keyframes */
@keyframes ft-gh-grid { to { background-position: 44px 44px; } }
@keyframes ft-gh-glow { to { transform: translate(-4%, 3%) scale(1.08); } }
@keyframes ft-gh-scan { from { top: -120px; } to { top: 100%; } }
@keyframes ft-gh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ft-gh-live { 70% { box-shadow: 0 0 0 10px #ed1c2400; } 100% { box-shadow: 0 0 0 0 #ed1c2400; } }
@keyframes ft-gh-glitch { 0%, 88%, 100% { transform: none; opacity: 0; } 90% { transform: translate(-4px, 1px); opacity: 1; } 94% { transform: translate(4px, -1px); opacity: 1; } }
@keyframes ft-gh-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes ft-gh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ft-gh-recoil { 0%, 100% { transform: none; } 8% { transform: translate(-7px, -1px) rotate(-1.2deg); } }
@keyframes ft-gh-flash { 0%, 12%, 100% { opacity: 0; } 2% { opacity: 1; transform: scale(1.15); } 7% { opacity: .7; transform: scale(.85); } }
@keyframes ft-gh-tracer { 0% { stroke-dashoffset: 22; opacity: 1; } 30% { stroke-dashoffset: -150; opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes ft-gh-aim { 0%, 100% { transform: translate(512px, 146px); } 25% { transform: translate(504px, 138px); } 50% { transform: translate(518px, 152px); } 75% { transform: translate(508px, 150px); } }
@keyframes ft-gh-hit { 0%, 30%, 100% { opacity: 0; } 18% { opacity: 1; } }
@keyframes ft-gh-flame { from { transform: scaleY(.82) scaleX(1.05); } to { transform: scaleY(1.12) scaleX(.94); } }
@keyframes ft-gh-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, -260px); opacity: 0; } }
@keyframes ft-gh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ft-gh-press { 0%, 100% { fill: #2a2a32; } 10% { fill: var(--gh-red); } }
@keyframes ft-gh-stick { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5px, -4px); } 50% { transform: translate(-4px, 3px); } 75% { transform: translate(3px, 5px); } }
@keyframes ft-gh-combo { 0%, 45%, 100% { background: #0009; border-color: #ffffff40; } 5% { background: var(--gh-red); border-color: var(--gh-red); } }
@keyframes ft-gh-health { 0%, 100% { right: 40%; } 40% { right: 12%; } 70% { right: 62%; } }
@keyframes ft-gh-pixel { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-14px); } }
@keyframes ft-gh-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ft-gh-spin { to { transform: rotate(360deg); } }
@keyframes ft-gh-ping { 0%, 100% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.3); } 50% { opacity: .3; transform: scale(1); } }
@keyframes ft-gh-eq { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@keyframes ft-gh-floor { to { background-position: 0 48px; } }
@keyframes ft-gh-screen { 0%, 100% { fill: #120a0d; } 50% { fill: #2a0a12; } }
@keyframes ft-gh-draw { 0% { stroke-dashoffset: 360; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes ft-gh-rgb { 0% { fill: #ed1c24; } 33% { fill: #ff8a00; } 66% { fill: #8b1a2b; } 100% { fill: #ed1c24; } }
@keyframes ft-gh-charge { 0% { transform: scaleX(.08); } 80%, 100% { transform: scaleX(1); } }
@keyframes ft-gh-bolt { 0%, 100% { opacity: 1; } 4% { opacity: .2; } 8% { opacity: 1; } 12% { opacity: .4; } }
@keyframes ft-gh-ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }

/* Motion off: editor toggle or OS preference */
.ft-gh--still *, .ft-gh--still *::before, .ft-gh--still *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ft-gh *, .ft-gh *::before, .ft-gh *::after { animation: none !important; }
}
.ft-gh--still .ft-gh-flash, .ft-gh--still .ft-gh-hit line { opacity: 1; }

@media (max-width: 900px) {
  .ft-gh-wrap, .ft-gh--compact .ft-gh-wrap { grid-template-columns: 1fr; padding: 30px 20px; min-height: 0; gap: 20px; }
  .ft-gh-stage, .ft-gh--compact .ft-gh-stage { justify-self: center; max-width: 520px; }
  .ft-gh--compact .ft-gh-stage { max-width: 360px; }
}
@media (max-width: 520px) {
  .ft-gh-wrap { padding: 24px 16px; }
  .ft-gh .ft-gh-kicker { font-size: 10px; letter-spacing: 2px; }
  .ft-gh-hud { display: none; }
  .ft-gh-copy { padding-right: 46px; }
  .ft-gh-ammo, .ft-gh-percent { font-size: 22px; }
  .ft-gh-combo span { min-width: 26px; height: 26px; font-size: 13px; }
}
