/* ============================================================
   ALONLIFE override — поверх оригинального main.css.
   ============================================================ */

/* --- 0a. Cross-browser dark background — prevents bright/white flash in Safari/Firefox/mobile --- */
:root { color-scheme: dark; }

html, body {
  background: #000 !important;
  background-color: #000 !important;
  -webkit-tap-highlight-color: transparent;
}

canvas {
  background: #000 !important;
  background-color: #000 !important;
  /* Prevent Safari from applying automatic color adjustments */
  -webkit-filter: none;
  filter: none;
}

/* Prevent iOS Safari "smart invert" and brightness auto-adjust */
@media (prefers-color-scheme: light) {
  html { background: #000 !important; }
  body { background: #000 !important; }
  canvas { background: #000 !important; }
}


/* --- 0. Отключить старый OwO-прелоадер --- */
#preloader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#boot-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-title {
  margin: 0;
  font-family: forma-djr-display, sans-serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: #fff;
  animation: bootPulse 1.8s ease-in-out infinite;
}

.boot-subtitle {
  margin: 0;
  font-family: forma-djr-display, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.boot-load {
  width: min(280px, 72vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.boot-load-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.boot-load-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.5), #fff);
  border-radius: 2px;
  transition: width 0.25s ease-out;
}

.boot-load-pct {
  font-family: forma-djr-display, sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.4);
}

@keyframes bootPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- 1. Убрать брендинг SMSY полностью --- */
#smsy,
#smsy * {
  display: none !important;
}

/* --- 2. WORKS — vertically centred panel, large red heading --- */
@keyframes wdpIn {
  0%   { opacity: 0; transform: translate(-50%, -48%) scaleY(0.92); filter: blur(6px); }
  40%  { opacity: 1; filter: blur(0); }
  60%  { transform: translate(-50%, -51%); }
  80%  { transform: translate(-50%, -49.5%); }
  100% { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
}
@keyframes wdpGlitch {
  0%,100% { clip-path: inset(0 0 100% 0); }
  10%      { clip-path: inset(0 0 65% 0);  opacity: .7; }
  30%      { clip-path: inset(0 0 30% 0);  opacity: 1; }
  60%      { clip-path: inset(0 0 0% 0); }
}

#works-data-panel {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  max-width: 700px;
  width: 90vw;
  text-align: center;
}

#works-data-panel.visible {
  display: block;
  animation: wdpIn 0.45s cubic-bezier(.22,.61,.36,1) forwards;
}

/* Title hidden — 3D scene already shows it */
#works-data-panel .wdp-title {
  display: none !important;
}

#works-data-panel .wdp-subtitle {
  font-family: forma-djr-display, sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#works-data-panel .wdp-tags {
  font-family: forma-djr-display, sans-serif;
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,0.55);
  margin: 0 0 18px;
  letter-spacing: 0.08em;
}

#works-data-panel .wdp-desc {
  font-family: forma-djr-display, sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,0.9);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.75;
}

/* --- 2b. DOCS page — fix two-column overflow → single scrollable column --- */
#about-text-container,
[id="about-text-container"][data-v-b9070ebd] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 30px !important;
  width: calc(100vw - 100px) !important;
  max-width: 1100px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  bottom: 80px !important;
  margin-left: 50px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.18) transparent !important;
  align-items: flex-start !important;
}
.about-text-container-half[data-v-b9070ebd],
.about-text-container-half {
  width: 50% !important;
  min-width: 0 !important;
  vertical-align: top !important;
  margin-left: 0 !important;
  display: inline-block !important;
  font-size: 0.75rem !important;
  line-height: 1.55 !important;
}
/* Tighten paragraph spacing inside about halves */
.about-text-container-half p,
.about-text-container-half h3 {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* --- 3. Hide "Creative Development" and "Raised on '90s classics" under EXPLORE --- */
h3.medium.anime,
h4.medium.anime,
h4.anime.medium {
  display: none !important;
}

/* --- 3b. About оставляем как есть --- */

/* --- 4. Новый акцентный цвет вместо плазmenно-красного #f03 --- */
:root {
  --opus-accent: #e8e8e8;
  --opus-bg: rgba(16, 16, 18, 0.55);
  --opus-border: rgba(255, 255, 255, 0.55);
}
.links a {
  color: var(--opus-accent) !important;
}

/* --- 5. Nav menu — flush to top edge (override margin-top: 50px) --- */
#topmenu {
  left: 30px !important;
  top: 0px !important;
  margin-top: 6px !important;
  translate: 0 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* --- 6. Кнопки меню — новый «стеклянный» стиль вместо плоского --- */
#topmenu .surround,
.infobutton,
.close-infos,
#skipbutton {
  background: var(--opus-bg) !important;
  border: 1px solid var(--opus-border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 10px 18px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  cursor: pointer !important;
}
#topmenu .surround p,
.infobutton p {
  color: #fff !important;
}
#topmenu .surround:hover,
.infobutton:hover,
.close-infos:hover,
#skipbutton:hover {
  background: #fff !important;
  color: #111 !important;
}
#topmenu .surround:hover p,
.infobutton:hover p {
  color: #111 !important;
}

/* --- 7. Soundtoggle — dark glass --- */
#soundtoggle {
  background-color: var(--opus-bg) !important;
  border: 1px solid var(--opus-border) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#soundtoggle.sound-off {
  background-color: rgba(16, 16, 18, 0.3) !important;
}
#soundtoggle.sound-off:hover {
  background-color: var(--opus-bg) !important;
}
.sound-bars .bar {
  background-color: #fff !important;
}

/* --- 8. About / DOCS page styling --- */
.big-title {
  color: #fff !important;
}
#about h2 {
  color: #fff !important;
}
/* Section headers inside DOCS text */
#about .about-text-container-half h3 {
  font-family: forma-djr-display, sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.22em !important;
  color: #ff2244 !important;
  text-transform: uppercase !important;
  margin: 18px 0 4px !important;
  font-weight: 700 !important;
}
#about .about-text-container-half p {
  margin: 0 0 8px !important;
  line-height: 1.65 !important;
}

/* --- 9. Кнопки CONTROL / JUMP — компактно слева внизу --- */
.title-container .left-tutorial {
  position: fixed !important;
  left: 24px !important;
  margin-top: 0 !important;
  width: max-content !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 90;
  pointer-events: none;
}

.title-container .left-tutorial:first-of-type {
  bottom: 54px !important;
}

.title-container .left-tutorial:last-of-type {
  bottom: 14px !important;
}

.title-container .left-tutorial .left-tutorial-container {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* D-pad: стрелка вверх по центру, три стрелки в ряд снизу */
.title-container .left-tutorial:first-of-type .left-tutorial-container:first-child {
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.title-container .left-tutorial:first-of-type .triangle-container:first-child {
  display: block !important;
  text-align: center !important;
  width: auto !important;
}

.title-container .left-tutorial:first-of-type .triangle-container:first-child .top,
.title-container .left-tutorial:first-of-type .triangle-container:first-child #aroundTriangle {
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

.title-container .left-tutorial:first-of-type .triangle-container:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.title-container .left-tutorial .left {
  margin-right: 0 !important;
}

.title-container .left-tutorial .right {
  margin-left: 0 !important;
}

.title-container .left-tutorial h1 {
  white-space: nowrap;
}

/* --- 10. Key bounce animation when pressing controls --- */
@keyframes keyBounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-7px) scale(1.15); }
  55%  { transform: translateY(3px) scale(0.95); }
  75%  { transform: translateY(-3px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.key-pressed {
  animation: keyBounce 0.38s cubic-bezier(.36,.07,.19,.97) both !important;
}

.space-pressed {
  animation: keyBounce 0.38s cubic-bezier(.36,.07,.19,.97) both !important;
}

/* --- 11. Original .links div inside #about — hidden, replaced by portal --- */
#about .links {
  display: none !important;
}