* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #05070a; color: #e9f1ff; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: #8ab6ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Loader styles */
:root {
  --bg: #0b0b0f;
  --stripe-1: #0c0c12;
  --stripe-2: #0a0a0f;
  --blue: #2a6dff;
  --white: #f5f7fb;
  --red: #ff3a2a;
  --duration: 1.5s;
}

.loader-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-wrapper.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-container {
  width: 100%;
  padding: 40px 0;
  background: repeating-linear-gradient(-60deg, var(--stripe-2) 0 16px, var(--stripe-1) 16px 32px);
  box-shadow: 0 0 20px rgba(0,0,0,.6);
}

.loader {
  display: grid;
  gap: 18px;
  place-items: center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

.bars {
  display: grid;
  grid-auto-flow: column;
  gap: 18px;
  align-items: end;
}

.bar {
  width: 120px;
  height: 28px;
  position: relative;
  opacity: .25;
  transform: translateZ(0);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.25));
  overflow: hidden;
  animation: flash var(--duration) ease-in-out infinite;
}

.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mix-blend-mode: screen;
  opacity: .9;
}

.bar.blue { color: var(--blue); }
.bar.white { color: var(--white); }
.bar.red { color: var(--red); }

.bar.white { animation-delay: calc(var(--duration) / 3); }
.bar.red   { animation-delay: calc(var(--duration) * 2 / 3); }

@keyframes flash {
  0%, 15%   { opacity: .25; filter: brightness(1); }
  15%, 35%  { opacity: 1;   filter: brightness(1.6) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor); }
  35%, 100% { opacity: .25; filter: brightness(1); }
}

.bar::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -30%;
  width: 60%;
  height: 300%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.55) 50%, transparent 65% 100%);
  opacity: 0;
  pointer-events: none;
  animation: sheen var(--duration) ease-in-out infinite;
}
.bar.white::after { animation-delay: calc(var(--duration) / 3); }
.bar.red::after   { animation-delay: calc(var(--duration) * 2 / 3); }

@keyframes sheen {
  0%, 10%   { opacity: 0; transform: translateX(-30%) rotate(25deg); }
  10%, 30%  { opacity: .9; transform: translateX(130%) rotate(25deg); }
  30%, 100% { opacity: 0; transform: translateX(130%) rotate(25deg); }
}

.loader-text {
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  color: #e7e9ee;
}

.loader-dots::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  text-align: left;
  animation: loader-dots 1s steps(4, end) infinite;
}
@keyframes loader-dots { to { content: "…"; } }

@media (prefers-reduced-motion: reduce) {
  .bar, .bar::after { animation: none; opacity: .9; }
  .loader-dots::after { animation: none; content: "…"; }
}

/* Fullscreen 3D canvas */
#webgl { position: fixed; inset: 0; z-index: 1; outline: none; }

/* Subtle vignette overlay */
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(100% 120% at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.55) 100%); }


/* HUD */
.hud { position: fixed; z-index: 5; inset: 0; pointer-events: none; }
.brand { position: absolute; top: 20px; left: 24px; font-weight: 800; letter-spacing: .06em; font-size: 22px; color: #82aefc; text-shadow: 0 0 18px rgba(0,102,204,.55); }
/* removed speed widget */

/* Section content container (center-right of screen) */
.content { position: fixed; z-index: 6; right: min(6vw, 72px); top: 50%; transform: translateY(-50%); width: min(580px, 48vw); max-height: 85vh; pointer-events: none; }
.card { position: relative; background: rgba(5, 12, 24, .65); border: 1px solid rgba(138,182,255,.22); border-radius: 14px; padding: 20px 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(0, 120, 255, .08); filter: drop-shadow(0 0 10px rgba(0,102,204,.25)); pointer-events: all; transition: opacity 0.3s ease; max-height: 85vh; overflow-y: auto; overflow-x: hidden; }
.card.building { opacity: 0; }
.card-content { position: relative; z-index: 11; opacity: 0; }
/* Custom scrollbar for card */
.card::-webkit-scrollbar { width: 6px; }
.card::-webkit-scrollbar-track { background: rgba(138,182,255,.1); border-radius: 3px; }
.card::-webkit-scrollbar-thumb { background: rgba(138,182,255,.4); border-radius: 3px; }
.card::-webkit-scrollbar-thumb:hover { background: rgba(138,182,255,.6); }
.card-tiles { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.tile { position: absolute; background: rgba(5, 12, 24, .65); border: 1px solid rgba(138,182,255,.4); box-shadow: 0 4px 20px rgba(0, 102, 204, 0.6), inset 0 0 15px rgba(138, 182, 255, 0.3); backdrop-filter: blur(6px); overflow: hidden; }
.tile-content { position: absolute; color: #e6efff; font-size: 15px; line-height: 1.65; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 20px 22px; }
.title { font-size: 28px; font-weight: 800; margin-bottom: 10px; color: #bcd3ff; text-shadow: 0 0 16px rgba(138,182,255,.45); }
.body { font-size: 15px; line-height: 1.65; color: #e6efff; }
.body p { margin: 10px 0; }
.body ul { margin: 6px 0 6px 22px; }
.body details { margin: 10px 0; }
.body details summary { 
  color: #bcd3ff; 
  font-weight: 600; 
  cursor: pointer; 
  user-select: none;
  padding: 5px 0;
  transition: color 0.2s ease;
}
.body details summary:hover { 
  color: #d4e3ff; 
}
.body details[open] summary { 
  margin-bottom: 10px; 
}
.body details ul { 
  margin-left: 20px; 
  margin-top: 5px; 
}
.body details div { 
  margin-top: 5px; 
}

/* Pagination inside details and div */
.details-pagination-wrapper {
  margin-top: 10px;
}

.details-pagination-container {
  position: relative;
  min-height: 50px;
}

.details-page {
  display: none;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.details-page.active {
  display: block;
}

.details-pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(138,182,255,.15);
}

.details-pagination-btn {
  background: rgba(138,182,255,.12);
  border: 1px solid rgba(138,182,255,.25);
  border-radius: 6px;
  padding: 6px 10px;
  color: #bcd3ff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.details-pagination-btn:hover:not(.disabled):not(:disabled) {
  background: rgba(138,182,255,.22);
  border-color: rgba(138,182,255,.4);
  color: #d4e3ff;
  transform: scale(1.08);
}

.details-pagination-btn.disabled,
.details-pagination-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.details-pagination-btn svg {
  width: 14px;
  height: 14px;
}

.details-pagination-indicators {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.details-pagination-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(138,182,255,.25);
  border: 1px solid rgba(138,182,255,.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.details-pagination-dot:hover {
  background: rgba(138,182,255,.45);
  transform: scale(1.3);
}

.details-pagination-dot.active {
  background: #8ab6ff;
  border-color: #8ab6ff;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 6px rgba(138,182,255,.5);
}

/* Nav dots */
.dots { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 7; display: flex; flex-direction: column; gap: 12px; }
.dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: rgba(138,182,255,.25); border: 1px solid rgba(138,182,255,.35); box-shadow: 0 0 10px rgba(0,102,204,.25); cursor: pointer; pointer-events: all; transition: transform .2s ease, background .2s ease; }
.dot.active { background: #8ab6ff; transform: scale(1.25); box-shadow: 0 0 16px rgba(138,182,255,.55); }

/* Tooltip для крапочок */
.dot-tooltip {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(5, 12, 24, 0.95);
  border: 1px solid rgba(138,182,255,.4);
  border-radius: 8px;
  padding: 8px 12px;
  color: #bcd3ff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(138,182,255,.3);
  backdrop-filter: blur(8px);
  z-index: 1000;
}

.dot-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(138,182,255,.4);
}

.dot:hover .dot-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(4px);
}

@media (max-width: 900px) {
  .content { right: 20px; left: 20px; width: auto; }
  .brand { left: 16px; }
  .dots { left: auto; right: 16px; }
  .dot-tooltip {
    left: auto;
    right: calc(100% + 16px);
  }
  .dot-tooltip::before {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: rgba(138,182,255,.4);
  }
  .dot:hover .dot-tooltip {
    transform: translateY(-50%) translateX(-4px);
  }
}

/* Purple theme - рожево-фіолетова тема */
body.purple {
  --purple-primary: #c084fc;
  --purple-secondary: #c084fc;
  --purple-blue: #9333ea;
  --purple-light: #e9d5ff;
  --purple-lighter: #f3e8ff;
  --purple-rgba-primary: rgba(192,132,252,1);
  --purple-rgba-shadow: rgba(147,51,234,1);
  --purple-rgba-inset: rgba(168,85,247,1);
}

body.purple a {
  color: var(--purple-primary);
}

body.purple :root {
  --blue: var(--purple-blue);
}

body.purple .bar.blue {
  color: var(--purple-blue);
}

body.purple .brand {
  color: var(--purple-secondary);
  text-shadow: 0 0 18px rgba(147,51,234,.55);
}

body.purple .card {
  border: 1px solid rgba(192,132,252,.22);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(168,85,247, .08);
  filter: drop-shadow(0 0 10px rgba(147,51,234,.25));
}

body.purple .card::-webkit-scrollbar-track {
  background: rgba(192,132,252,.1);
}

body.purple .card::-webkit-scrollbar-thumb {
  background: rgba(192,132,252,.4);
}

body.purple .card::-webkit-scrollbar-thumb:hover {
  background: rgba(192,132,252,.6);
}

body.purple .tile {
  border: 1px solid rgba(192,132,252,.4);
  box-shadow: 0 4px 20px rgba(147,51,234, 0.6), inset 0 0 15px rgba(192, 132, 252, 0.3);
}

body.purple .title {
  color: var(--purple-light);
  text-shadow: 0 0 16px rgba(192,132,252,.45);
}

body.purple .details-pagination-nav {
  border-top: 1px solid rgba(192,132,252,.15);
}

body.purple .details-pagination-btn {
  background: rgba(192,132,252,.12);
  border: 1px solid rgba(192,132,252,.25);
  color: var(--purple-light);
}

body.purple .details-pagination-btn:hover:not(.disabled):not(:disabled) {
  background: rgba(192,132,252,.22);
  border-color: rgba(192,132,252,.4);
  color: var(--purple-lighter);
}

body.purple .details-pagination-dot {
  background: rgba(192,132,252,.25);
  border: 1px solid rgba(192,132,252,.3);
}

body.purple .details-pagination-dot:hover {
  background: rgba(192,132,252,.45);
}

body.purple .details-pagination-dot.active {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  box-shadow: 0 0 6px rgba(192,132,252,.5);
}

body.purple .dot {
  background: rgba(192,132,252,.25);
  border: 1px solid rgba(192,132,252,.35);
  box-shadow: 0 0 10px rgba(147,51,234,.25);
}

body.purple .dot.active {
  background: var(--purple-primary);
  box-shadow: 0 0 16px rgba(192,132,252,.55);
}

body.purple .dot-tooltip {
  border: 1px solid rgba(192,132,252,.4);
  color: var(--purple-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(192,132,252,.3);
}

body.purple .dot-tooltip::before {
  border-right-color: rgba(192,132,252,.4);
}

@media (max-width: 900px) {
  body.purple .dot-tooltip::before {
    border-left-color: rgba(192,132,252,.4);
  }
}

/* Заміна кольорів в inline стилях через CSS змінні */
body.purple .body details summary {
  color: var(--purple-light);
}

body.purple .body details summary:hover {
  color: var(--purple-lighter);
}

/* Заміна кольорів в inline стилях контенту */
body.purple .body p[style*="color: #bcd3ff"],
body.purple .body p[style*="color:#bcd3ff"] {
  color: var(--purple-light) !important;
}

body.purple .body div[style*="border-top: 1px solid rgba(138,182,255"] {
  border-top-color: rgba(192,132,252,.2) !important;
}

/* Мобільна версія - статичний фон замість 3D */
body.mobile-version {
  background: #05070a00;
  position: relative;
  overflow-x: hidden;
}

body.mobile-version::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(42, 109, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #05070a 0%, #0a0d14 50%, #05070a 100%);
  background-size: 100% 100%;
  pointer-events: none;
}

/* body.mobile-version #webgl {
  display: none !important;
} */

body.mobile-version .vignette {
  background: radial-gradient(100% 120% at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.6) 100%);
}

/* Адаптація контенту для мобільних */
@media (max-width: 768px) {
  body.mobile-version .content {
    right: 16px;
    left: 16px;
    width: auto;
    max-width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  
  body.mobile-version .card {
    padding: 16px 18px;
    max-height: 80vh;
  }
  
  body.mobile-version .brand {
    font-size: 18px;
    top: 16px;
    left: 16px;
  }
  
  body.mobile-version .dots {
    left: auto;
    right: 16px;
    gap: 10px;
  }
  
  body.mobile-version .dot {
    width: 10px;
    height: 10px;
  }
  
  body.mobile-version .title {
    font-size: 24px;
  }
  
  body.mobile-version .body {
    font-size: 14px;
  }
}