/* Global layout hardening (Vercel + full-screen app) */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;       /* kill horizontal scroll */
  overflow-y: auto;         /* allow landing/footer pages to scroll */
  background: #000;
}

/* Theme: when user picks Light in Account > Appearance or AI Sidebar, invert page */
html.light body,
html.light #root {
  background: #f5f5f5;
  color: #111;
}

/* min-height lets content push page height; overflow-x only prevents sideways */
#root {
  min-height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}


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

/* Optional: prevent iOS overscroll rubber-banding on full-screen pages */
@supports (-webkit-touch-callout: none) {
  body {
    overscroll-behavior: none;
  }
}

/* ChartWidget: hide KLineChart Pro built-in toolbar/period bar; use our dock only */
.chart-widget-pro-container .klinecharts-pro-period-bar {
  display: none !important;
}
.chart-widget-pro-container .klinecharts-pro-content {
  height: 100% !important;
}
.chart-widget-pro-container .klinecharts-pro {
  height: 100%;
}

/* High-res assets: smooth interpolation when canvas/widgets are scaled or on smaller displays */
.canvas-smooth-scale img,
.canvas-smooth-scale canvas,
.canvas-smooth-scale svg {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}
.canvas-smooth-scale {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Edit mode widget hover: 1px dashed stroke (non-scaling), same as widget container ring */
@keyframes r0y-dash-move {
  to { stroke-dashoffset: -18; }
}
.r0y-edit-hover-dashed rect {
  animation: r0y-dash-move 0.5s linear infinite;
}

/* Parallax cosmic stars (beta competition hero) — stars only, no text */
@keyframes animCosmicStar {
  from { transform: translateY(0); }
  to { transform: translateY(-2000px); }
}

.parallax-cosmic-stars-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --cosmic-animation-iteration: infinite;
}

.parallax-cosmic-stars,
.parallax-cosmic-stars-medium,
.parallax-cosmic-stars-large {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  animation: animCosmicStar var(--cosmic-animation-iteration) linear;
  will-change: transform;
}

.parallax-cosmic-stars {
  top: 0;
  left: 0;
  opacity: 0.85;
  animation-duration: 140s;
}

.parallax-cosmic-stars-medium {
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  opacity: 0.95;
  animation-duration: 200s;
}

.parallax-cosmic-stars-large {
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  opacity: 1;
  animation-duration: 280s;
}

.parallax-cosmic-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  pointer-events: none;
}

/* Earth / half-moon planetary arc at horizon */
.parallax-cosmic-earth-arc {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200vmax;
  height: 100vmin;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(
    ellipse 100% 70% at 50% 100%,
    rgba(50, 120, 220, 0.55) 0%,
    rgba(30, 80, 180, 0.35) 35%,
    rgba(15, 50, 130, 0.15) 60%,
    transparent 75%
  );
  box-shadow: 0 -6px 80px 30px rgba(60, 130, 230, 0.35);
  pointer-events: none;
}

.parallax-cosmic-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, transparent 70%);
}

/* Competition page: gold subtitle with left-to-right shimmer (pause then repeat) */
@keyframes shimmer-gold {
  0% { background-position: -120% 50%; }
  35% { background-position: 220% 50%; }
  50% { background-position: 220% 50%; }
  85% { background-position: -120% 50%; }
  100% { background-position: -120% 50%; }
}
.comp-subtitle-gold {
  color: #C9A227;
  background: linear-gradient(
    90deg,
    #C9A227 0%,
    #E8C547 15%,
    #F5E6A3 35%,
    #E8C547 50%,
    #C9A227 65%,
    #E8C547 85%,
    #C9A227 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-gold 6s ease-in-out infinite;
}

/* Sidebar-news (21st.dev): "You're all caught up" state */
@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(var(--offset, 10px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.caret-blink {
  animation: blink 1s step-end infinite;
}
.hide-native-caret {
  caret-color: transparent !important;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
.animate-slide-up-fade {
  animation: slide-up-fade 1s ease-out forwards;
}
.animate-fade-in {
  animation: fade-in 0.2s ease-out forwards;
}