@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800;900&display=swap');

:root {
  --background: 24 94% 88%;
  --foreground: 226 45% 13%;
  --primary: 28 100% 50%;
  --primary-foreground: 226 45% 10%;
  --secondary: 278 84% 48%;
  --secondary-foreground: 210 40% 98%;
  --accent: 190 95% 44%;
  --accent-foreground: 226 45% 10%;
  --muted: 30 54% 88%;
  --muted-foreground: 222 28% 36%;
  --destructive: 0 76% 52%;
  --destructive-foreground: 210 40% 98%;
  --border: 24 42% 70%;
  --card: 35 100% 96%;
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-md: 0 22px 55px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 35px 95px rgba(15, 23, 42, 0.18);
  --gold-glow: 0 0 30px hsla(var(--primary), .32), 0 0 46px hsla(var(--accent), .16);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.65rem;
}

.dark {
  --background: 24 94% 88%;
  --foreground: 226 45% 13%;
  --primary: 28 100% 50%;
  --primary-foreground: 226 45% 10%;
  --secondary: 278 84% 48%;
  --secondary-foreground: 210 40% 98%;
  --accent: 190 95% 44%;
  --accent-foreground: 226 45% 10%;
  --muted: 30 54% 88%;
  --muted-foreground: 222 28% 36%;
  --destructive: 0 76% 52%;
  --destructive-foreground: 210 40% 98%;
  --border: 24 42% 70%;
  --card: 35 100% 96%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; scrollbar-color: hsl(var(--primary)) hsla(var(--muted), .9); scrollbar-width: thin; }
body {
  margin: 0;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%237b2ff7' offset='0'/%3E%3Cstop stop-color='%23f857a6' offset='.48'/%3E%3Cstop stop-color='%23ffb347' offset='.76'/%3E%3Cstop stop-color='%23ffe29f' offset='1'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.5' cy='.56' r='.22'%3E%3Cstop stop-color='%23fff7b0' offset='0'/%3E%3Cstop stop-color='%23ffb347' offset='.55'/%3E%3Cstop stop-color='%23ff6a3d' stop-opacity='0' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23sky)'/%3E%3Ccircle cx='720' cy='500' r='265' fill='url(%23sun)'/%3E%3Cg opacity='.26' stroke='%23fff6c9' stroke-width='3'%3E%3Cpath d='M0 560h1440M0 610h1440M0 660h1440M0 710h1440'/%3E%3Cpath d='M260 900 640 552M1180 900 800 552M500 900 680 552M940 900 760 552'/%3E%3C/g%3E%3Cpath d='M0 720c145-50 238-22 360-42 138-22 238-88 390-70 160 19 240 100 402 88 122-9 197-61 288-66v270H0z' fill='%2312192f' opacity='.94'/%3E%3Cg fill='%23080d1e'%3E%3Cpath d='M0 765h1440v135H0z'/%3E%3Cpath d='M80 759c50-78 80-95 118-95 46 0 78 35 122 99z' opacity='.72'/%3E%3Cpath d='M1115 762c48-90 92-112 140-110 54 2 91 43 126 110z' opacity='.76'/%3E%3C/g%3E%3Cg fill='%23060a17'%3E%3Ccircle cx='254' cy='556' r='22'/%3E%3Cpath d='M247 578h16l8 85h-31zM238 610l-74 36 11 17 71-27zM270 611l82 9 4-19-80-14zM241 663l-34 72 23 7 37-71zM270 663l54 61 20-15-48-65z'/%3E%3Ccircle cx='360' cy='596' r='20'/%3E%3Cpath d='M344 620h31l28 82-24 6-17-48-35 57-22-11zM350 622l-64 12-5-19 68-22zM375 622l75 34-9 19-73-26z'/%3E%3Ccircle cx='720' cy='552' r='20'/%3E%3Cpath d='M708 574h30l6 92h-39zM708 602l-82-23 5-22 85 18zM738 601l80-43 10 20-76 48zM707 666l-46 70 23 12 49-69zM743 664l49 68 23-13-44-72z'/%3E%3Cpath d='M815 546l118-66 9 16-118 66zM922 465l60-34 11 19-60 34z'/%3E%3Ccircle cx='1040' cy='562' r='21'/%3E%3Cpath d='M1028 584h31l-2 86h-39zM1025 611l-72 18-6-21 75-28zM1059 609l68 52-14 18-66-42zM1020 668l-58 54 18 19 61-50zM1056 669l28 72 24-8-22-77z'/%3E%3Ccircle cx='1204' cy='610' r='18'/%3E%3Cpath d='M1191 630h27l18 76-23 5-12-42-34 47-18-13zM1195 632l-55-22 8-19 56 15zM1221 633l58 18-6 20-59-9z'/%3E%3Cellipse cx='1324' cy='606' rx='28' ry='18'/%3E%3Cpath d='M1298 606c12-26 40-27 55 0M1318 588c-8 14-8 22 0 36M1330 588c8 14 8 22 0 36' fill='none' stroke='%23060a17' stroke-width='6'/%3E%3Ccircle cx='114' cy='667' r='32'/%3E%3Cpath d='M85 667h58M114 636v62M92 645c22 16 35 33 44 44M136 645c-22 16-35 33-44 44' fill='none' stroke='%23ff8733' stroke-width='5' opacity='.22'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 54%, hsla(45, 100%, 76%, .45), transparent 28rem),
    linear-gradient(180deg, hsl(264 92% 58%) 0%, hsl(337 92% 66%) 43%, hsl(31 100% 65%) 74%, hsl(45 100% 82%) 100%);
  background-size: cover, auto, cover;
  background-position: center bottom, center, center;
  background-attachment: fixed, fixed, fixed;
  font-family: "Times New Roman", Times, serif;
  text-shadow: none;
}
#root { max-width: 100vw; overflow-x: hidden; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%, rgba(8,13,30,.16));
  background-size: 130px 120px, 180px 160px, cover;
  animation: sunsetSparkle 30s linear infinite;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: hsla(var(--muted), .88); border-left: 1px solid hsla(var(--border), .8); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--secondary))); border: 3px solid hsla(var(--muted), .88); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, hsl(var(--accent)), hsl(var(--primary)), hsl(var(--secondary))); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: hsl(var(--foreground)); }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: .78; }
.focus-ring:focus { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
.glass {
  position: relative;
  background: linear-gradient(145deg, hsla(var(--card), .90), hsla(30, 100%, 94%, .80));
  border: 1px solid hsla(var(--border), .95);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.78);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.42), transparent 34%, hsla(var(--primary), .08));
}
.premium-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)) 46%, hsl(var(--secondary)));
}
.premium-text {
  color: hsl(var(--primary));
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  filter: drop-shadow(0 0 12px hsla(var(--primary), .20));
}
.luxury-shop-name {
  letter-spacing: -.045em;
  color: hsl(var(--primary));
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
  filter: drop-shadow(0 0 20px hsla(var(--primary), .25));
}
.cosmic-wordmark {
  font-family: 'Orbitron', "Times New Roman", serif;
  letter-spacing: -.045em;
  color: transparent;
  background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--secondary)), hsl(var(--primary)));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 16px hsla(var(--accent), .46)) drop-shadow(0 0 30px hsla(var(--secondary), .30));
  animation: wordPulse 2.8s ease-in-out infinite;
}
.lux-button {
  box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow: none;
}
.marketplace-hero {
  background: linear-gradient(135deg, hsla(32, 100%, 94%, .92), hsla(337, 92%, 91%, .82) 42%, hsla(265, 92%, 88%, .76));
}
.market-search-card, .market-search-card * { text-shadow: none; }
.starfield {
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background:
    radial-gradient(circle, hsla(226,45%,20%,.48) 0 1px, transparent 1.8px) 0 0 / 72px 72px,
    radial-gradient(circle, hsla(var(--accent),.55) 0 1px, transparent 1.8px) 18px 28px / 118px 118px;
  animation: starDrift 24s linear infinite;
}
.galaxy-emblem { position: relative; width: min(82vw, 310px); height: 330px; display: grid; place-items: center; filter: drop-shadow(0 0 28px hsla(var(--accent), .35)); }
.emblem-shield { position: relative; width: 250px; height: 290px; clip-path: polygon(50% 0, 92% 15%, 82% 74%, 50% 100%, 18% 74%, 8% 15%); background: radial-gradient(circle at 50% 42%, hsla(var(--secondary),.46), transparent 30%), linear-gradient(145deg, rgba(3,7,28,.96), rgba(14,8,42,.92)); border: 3px solid transparent; box-shadow: inset 0 0 35px hsla(var(--accent), .35), inset 0 0 70px hsla(var(--secondary), .22), 0 0 0 3px hsla(var(--accent), .75), 0 0 26px hsla(var(--secondary), .72), 0 0 46px hsla(var(--primary), .48); }
.emblem-shield::before { content: ""; position: absolute; inset: 9px; clip-path: inherit; border: 2px solid hsla(var(--primary), .55); box-shadow: 0 0 18px hsla(var(--primary), .55), inset 0 0 22px hsla(var(--accent), .18); }
.shield-stars { position: absolute; inset: 20px; background: radial-gradient(circle, white 0 1px, transparent 2px) 8px 12px / 42px 42px, radial-gradient(circle, hsla(var(--accent),.9) 0 1px, transparent 2px) 18px 4px / 58px 58px; opacity: .88; animation: twinkle 2.6s ease-in-out infinite; }
.galaxy-core { position: absolute; inset: 72px 48px; border-radius: 50%; background: radial-gradient(circle, #fff 0 7%, hsl(var(--accent)) 8% 16%, hsla(var(--secondary),.85) 17% 26%, transparent 28%); animation: spinGalaxy 8s linear infinite; filter: drop-shadow(0 0 18px hsl(var(--accent))); }
.galaxy-core span, .galaxy-core i, .galaxy-core b { position: absolute; inset: 50% auto auto 50%; width: 158px; height: 32px; border-radius: 50%; border-top: 5px solid hsla(var(--accent), .82); transform-origin: 0 0; }
.galaxy-core span { transform: rotate(18deg) translate(-50%, -50%); }
.galaxy-core i { transform: rotate(138deg) translate(-50%, -50%); border-top-color: hsla(var(--secondary), .78); }
.galaxy-core b { transform: rotate(258deg) translate(-50%, -50%); border-top-color: hsla(var(--primary), .78); }
.orbit { position: absolute; left: 25px; top: 102px; width: 200px; height: 82px; border: 2px solid hsla(var(--accent), .72); border-radius: 50%; animation: orbitSpin 4.5s linear infinite; box-shadow: 0 0 16px hsla(var(--accent), .42); }
.orbit-two { transform: rotate(72deg); border-color: hsla(var(--primary), .78); animation-duration: 6s; animation-direction: reverse; box-shadow: 0 0 16px hsla(var(--primary), .45); }
.orbit span { position: absolute; right: 10px; top: 12px; width: 13px; height: 13px; border-radius: 999px; background: hsl(var(--accent)); box-shadow: 0 0 16px hsl(var(--accent)); }
.orbit-two span { background: hsl(var(--primary)); box-shadow: 0 0 16px hsl(var(--primary)); }
.comet { position: absolute; left: 108px; top: 132px; width: 16px; height: 16px; border-radius: 999px; background: white; box-shadow: -26px 0 20px 8px hsla(var(--accent), .34), 0 0 18px white; animation: cometLoop 3.7s linear infinite; }
.sport-card {
  transition: transform var(--transition-smooth), border-color var(--transition-fast), box-shadow var(--transition-smooth);
}
.sport-card:hover {
  transform: translateY(-7px) scale(1.01);
  border-color: hsla(var(--primary), .72);
  box-shadow: 0 26px 76px hsla(var(--primary), .17), 0 0 0 1px hsla(var(--primary), .18);
}
.product-visual::after {
  content: "";
  position: absolute;
  inset: auto 14% 0;
  height: 22%;
  background: radial-gradient(ellipse, rgba(0,0,0,.35), transparent 68%);
  filter: blur(8px);
}
.product-3d-image {
  transform: scale(1.03);
  filter: saturate(1.16) contrast(1.08) drop-shadow(0 24px 32px rgba(0,0,0,.35));
  transition: transform var(--transition-smooth), filter var(--transition-smooth);
}
.sport-card:hover .product-3d-image {
  transform: scale(1.1) rotate(-1deg);
  filter: saturate(1.25) contrast(1.12) drop-shadow(0 30px 42px rgba(0,0,0,.42));
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
::selection { background: hsla(var(--primary), .35); color: hsl(var(--foreground)); }
@keyframes starDrift { from { background-position: 0 0, 18px 28px, 70px 20px; } to { background-position: 180px 260px, 218px 328px, 290px 340px; } }
@keyframes sunsetSparkle { from { background-position: 0 0, 30px 15px, center; } to { background-position: 260px 240px, 390px 335px, center; } }
@keyframes wordPulse { 0%, 100% { filter: drop-shadow(0 0 14px hsla(var(--accent), .42)) drop-shadow(0 0 28px hsla(var(--secondary), .28)); } 50% { filter: drop-shadow(0 0 26px hsla(var(--accent), .82)) drop-shadow(0 0 48px hsla(var(--primary), .45)); } }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes spinGalaxy { to { transform: rotate(360deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes cometLoop { from { transform: rotate(0deg) translateX(132px) rotate(0deg); } to { transform: rotate(360deg) translateX(132px) rotate(-360deg); } }