html { background-color: #0f172a; -webkit-tap-highlight-color: transparent; }
body {
background-color: #0f172a; color: #f8fafc;
-webkit-user-select: none; user-select: none;
display: flex; flex-direction: column;
min-height: 100vh; overflow-x: hidden; overflow-y: auto; width: 100%;
}
input, select, textarea { -webkit-user-select: auto; user-select: auto; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
a, button, .item-box, .group { touch-action: manipulation; }

.glass-panel {
background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); border: 1px solid rgba(51, 65, 85, 0.8);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
}
.glass-nav {
background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #F59E0B; }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.snap-x-mandatory { scroll-snap-type: x mandatory; }
.snap-center { scroll-snap-align: center; }

.marquee-container { display: block; overflow: hidden; white-space: nowrap; width: 100%; }
.marquee-content { display: inline-block; padding-left: 100%; animation: marqueeScroll 30s linear infinite; will-change: transform; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.auto-scroll-box { display: block; width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
.auto-scroll-text { display: inline-block; padding-left: 100%; animation: autoScrollAnim 10s linear infinite; will-change: transform; }
@keyframes autoScrollAnim { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* --- Custom Seamless Leaderboard Marquee Styles --- */
.leaderboard-scroller { mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.leaderboard-track { display: flex; width: max-content; animation: seamlessMarquee 35s linear infinite; will-change: transform; }
.leaderboard-track:hover { animation-play-state: paused; }
@keyframes seamlessMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.shimmer-bg { position: relative; overflow: hidden; }
.shimmer-bg::after {
content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: skewX(-20deg); animation: shimmerSweep 2.5s infinite linear;
}
@keyframes shimmerSweep { 0% { left: -150%; } 100% { left: 250%; } }

.shimmer-text {
background: linear-gradient(110deg, #ffffff 0%, #ffffff 40%, #F59E0B 50%, #ffffff 60%, #ffffff 100%);
background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
animation: textShimmer 3s infinite linear;
}
@keyframes textShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.carousel-slide-item { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; transform: scale(0.92); opacity: 0.5; }
.carousel-slide-item.is-active { transform: scale(1); opacity: 1; z-index: 10; }

.item-box { background: #1e293b; border: 1px solid #334155; transition: all 0.2s ease; position: relative; cursor: pointer; overflow: hidden; }
.item-box:active:not(.sold-out) { transform: scale(0.98); }
.item-box.selected { border-color: #F59E0B; background: rgba(245, 158, 11, 0.1); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15); }
.item-box.sold-out { cursor: not-allowed; }

.input-field {
background: #1e293b; border: 1px solid #334155; color: #ffffff; width: 100%;
padding: 12px 16px; border-radius: 12px; font-size: 14px !important; font-weight: 600;
transition: all 0.3s ease; outline: none;
}
.input-field::placeholder { color: #64748b; font-weight: 500; }
.input-field:focus, .input-field.is-focused { border-color: #F59E0B; background: #0f172a; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }

select.input-field {
appearance: none; background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 36px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
select.input-field:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E"); }
select.input-field option { background: #1e293b; color: #ffffff; padding: 12px; }

.btn-primary {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); color: #0f172a; padding: 14px 24px; border-radius: 12px;
font-weight: 800; font-size: 15px; transition: all 0.2s ease; box-shadow: 0 6px 20px -5px rgba(245, 158, 11, 0.4);
display: inline-flex; justify-content: center; align-items: center; border: none; cursor: pointer; position: relative; overflow: hidden;
}
.btn-primary::after {
content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: skewX(-20deg); animation: shimmerSweep 2.5s infinite linear;
}
.btn-primary:active:not(:disabled) { transform: scale(0.96); box-shadow: 0 2px 10px -5px rgba(245, 158, 11, 0.4); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.view-section { display: none; opacity: 0; background-color: transparent; }
.view-section.active-view { display: block; opacity: 1; }

.circle-progress { animation: rotate 1s linear infinite; }
.circle-progress circle { stroke: currentColor; stroke-width: 5; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1s ease-in-out infinite; stroke-linecap: round; fill: none; }
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash {
0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; }
}

.fade-in-text { animation: softFadeIn 0.5s ease forwards; opacity: 0; }
@keyframes softFadeIn { to { opacity: 1; } }

.success-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #34d399; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #34d399; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.success-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #34d399; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.success-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

.failed-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 3; stroke: #ef4444; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #ef4444; animation: fillRed .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.failed-checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #ef4444; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.failed-checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px rgba(52, 211, 153, 0.1); } }
@keyframes fillRed { 100% { box-shadow: inset 0px 0px 0px 30px rgba(239, 68, 68, 0.1); } }