/* =========================================================
   MEMORY OF MEMORY
   Полный CSS. Файл должен лежать рядом с index.html.
   Фоновая картинка: space-bg.jpg — тоже рядом с файлами.
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background:
    #020b11 url("./space-bg.jpg") center top / cover fixed no-repeat;
  color: #79c7e8;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  letter-spacing: .2px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(120,210,255,.018) 3px,
      transparent 4px
    );
  z-index: 999;
}

.site {
  position: relative;
  width: min(940px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 34px 0;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(22,27,29,.98), rgba(4,14,20,.93) 4%, rgba(3,14,21,.92) 50%, rgba(4,14,20,.93) 96%, rgba(22,27,29,.98));
  border-left: 2px solid #697477;
  border-right: 2px solid #697477;
  box-shadow:
    0 0 0 1px #071219,
    0 0 30px rgba(0,0,0,.85);
}

/* -------------------------
   МЕТАЛЛИЧЕСКИЕ НАПРАВЛЯЮЩИЕ
   ------------------------- */

.site::before,
.site::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 23px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, #727d82 0%, #d1d5d5 12%, #8b969a 24%, #e2e4e3 39%, #737d81 55%, #c7cccd 72%, #667176 88%, #aeb5b7 100%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(25,30,32,.72) 5px 7px, transparent 7px 10px);
  border: 1px solid #d5d8d8;
  box-shadow:
    inset 0 0 0 2px #3b4448,
    inset 2px 0 0 rgba(255,255,255,.42),
    inset -2px 0 0 rgba(20,25,27,.72),
    inset 0 0 10px rgba(255,255,255,.2),
    0 0 4px rgba(0,0,0,.9),
    0 2px 0 #20282b;
}

.site::before {
  left: 4px;
}

.site::after {
  right: 4px;
}

/* БОЛТЫ / КРЕПЁЖ: маленькие металлические детали по краям */
.screw {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f3f2 0 12%, #aeb4b6 13% 38%, #596165 39% 68%, #252c2f 69% 100%);
  border: 1px solid #d9dcdb;
  box-shadow: 0 1px 0 #111, inset 0 0 2px rgba(255,255,255,.65);
}
.screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 1px;
  background: #30383b;
  transform: rotate(-18deg);
}
.screw-1 { top: 17px; left: 10px; }
.screw-2 { top: 17px; right: 10px; }
.screw-3 { top: 222px; left: 10px; }
.screw-4 { top: 222px; right: 10px; }

.header {
  position: relative;
  min-height: 205px;
  padding: 35px 55px 28px;
  text-align: center;
  border: 1px solid #173b4b;
  border-bottom: 2px solid #087ba8;
  background:
    linear-gradient(180deg, rgba(8,26,36,.92), rgba(1,9,14,.96));
  box-shadow:
    inset 0 0 25px rgba(0,130,190,.08),
    0 0 15px rgba(0,0,0,.5);
}

.logo {
  margin: 0;
  color: #b9edff;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: .95;
  letter-spacing: -2px;
  text-shadow:
    0 2px 0 #4e8da9,
    0 4px 0 #24566d,
    2px 5px 0 #07151c,
    -2px 5px 0 #07151c,
    0 0 5px #55d8ff,
    0 0 18px rgba(0,180,255,.85);
  transform: perspective(300px) rotateX(2deg);
}

.subtitle {
  margin-top: 10px;
  color: #397e9b;
  font-size: 9px;
  letter-spacing: 4px;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.main-nav a {
  position: relative;
  z-index: 5;
  display: inline-block;
  min-width: 116px;
  padding: 11px 22px;
  color: #79c7e8;
  text-decoration: none;
  text-align: center;
  border: 1px solid #087da8;
  background:
    linear-gradient(180deg, #0b2634, #06131b 70%);
  box-shadow:
    inset 0 0 8px rgba(0,140,190,.18),
    0 0 4px rgba(0,100,150,.35);
  transition:
    color .12s ease,
    background .12s ease;
}

.main-nav a:hover {
  color: #d9f7ff;
  background: linear-gradient(180deg, #12384a, #071821);
}

/* =========================================================
   КРАСНАЯ GRUNGE-ОБВОДКА + ЧАСТИЦЫ
   Работает только пока курсор находится на МУЗЫКЕ.
   ========================================================= */

.main-nav .music-link {
  --red: #e40000;
  --dark-red: #790000;
  --bright-red: #ff2929;
}

/* Рваная внешняя рамка */
.main-nav .music-link::before {
  content: "";
  position: absolute;
  z-index: 20;
  pointer-events: none;
  top: -11px;
  right: -12px;
  bottom: -11px;
  left: -12px;
  opacity: 0;
  border: 3px solid var(--red);
  clip-path: polygon(
    0% 8%, 4% 3%, 12% 5%, 19% 1%, 29% 4%, 38% 1%,
    49% 5%, 58% 2%, 68% 5%, 78% 1%, 88% 4%, 97% 1%,
    99% 12%, 96% 22%, 99% 31%, 96% 43%, 100% 54%,
    97% 64%, 100% 76%, 96% 88%, 99% 98%, 88% 96%,
    79% 100%, 69% 96%, 58% 99%, 48% 96%, 37% 100%,
    26% 96%, 17% 99%, 7% 95%, 1% 99%, 3% 87%, 0% 76%,
    3% 64%, 0% 53%, 3% 42%, 0% 31%, 4% 20%
  );
  filter:
    drop-shadow(2px 0 0 var(--dark-red))
    drop-shadow(-2px 1px 0 var(--bright-red))
    drop-shadow(0 0 4px rgba(255,0,0,.8));
  transform: rotate(-.8deg) skewX(-1deg);
  transition: opacity .08s;
  animation: grunge-frame .27s steps(2, end) infinite;
}

/* Частицы: несколько независимых слоёв через radial-gradient */
.main-nav .music-link::after {
  content: "";
  position: absolute;
  z-index: 19;
  pointer-events: none;
  width: 145px;
  height: 125px;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 4% 48%, #ff1b1b 0 2px, transparent 3px),
    radial-gradient(circle at 12% 17%, #c60000 0 1px, transparent 3px),
    radial-gradient(circle at 22% 83%, #ff3434 0 1.5px, transparent 3px),
    radial-gradient(circle at 31% 8%, #b50000 0 2px, transparent 3px),
    radial-gradient(circle at 42% 94%, #e00000 0 1px, transparent 3px),
    radial-gradient(circle at 52% 3%, #ff2424 0 1.5px, transparent 3px),
    radial-gradient(circle at 65% 96%, #c90000 0 2px, transparent 3px),
    radial-gradient(circle at 78% 5%, #ff3030 0 1px, transparent 3px),
    radial-gradient(circle at 91% 20%, #c00000 0 2px, transparent 3px),
    radial-gradient(circle at 98% 55%, #ff1717 0 1.5px, transparent 3px),
    radial-gradient(circle at 88% 86%, #b40000 0 1px, transparent 3px),
    radial-gradient(circle at 8% 72%, #e50000 0 1px, transparent 3px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,0,0,.75));
}

/* Только hover: рамка и частицы включаются одновременно */
.main-nav .music-link:hover::before {
  opacity: 1;
}

.main-nav .music-link:hover::after {
  opacity: 1;
  animation:
    particle-burst 1.05s linear infinite,
    particle-jitter .21s steps(2, end) infinite;
}

.main-nav .music-link:hover {
  animation: button-grunge-shake .18s steps(2, end) infinite;
  box-shadow:
    0 0 0 2px rgba(180,0,0,.22),
    0 0 15px rgba(255,0,0,.28),
    inset 0 0 9px rgba(255,0,0,.1);
}

@keyframes grunge-frame {
  0%   { transform: rotate(-.8deg) translate(0,0) skewX(-1deg); }
  25%  { transform: rotate(-1.5deg) translate(-1px,1px) skewX(-2deg); }
  50%  { transform: rotate(-.2deg) translate(1px,-1px) skewX(0deg); }
  75%  { transform: rotate(-1.2deg) translate(1px,0) skewX(-1deg); }
  100% { transform: rotate(-.8deg) translate(0,0) skewX(-1deg); }
}

@keyframes particle-burst {
  0% {
    transform: translate(-50%, -50%) scale(.65);
    background-position: 0 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    background-position: 10px -13px;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.08);
    background-position: 22px -29px;
  }
}

@keyframes particle-jitter {
  0%   { margin-left: 0; }
  50%  { margin-left: 2px; }
  100% { margin-left: -2px; }
}

@keyframes button-grunge-shake {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1px,1px); }
  50%  { transform: translate(1px,-1px); }
  75%  { transform: translate(1px,0); }
  100% { transform: translate(0,0); }
}

/* -------------------------
   КОНТЕНТ
   ------------------------- */

.content {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  gap: 12px;
  padding: 14px 5px 25px;
}

.sidebar {
  min-width: 0;
}

.panel {
  margin-bottom: 12px;
  padding: 9px;
  border: 1px solid #0b6689;
  background: linear-gradient(180deg, rgba(7,30,42,.92), rgba(2,13,20,.94));
  box-shadow:
    inset 0 0 12px rgba(0,150,210,.07),
    0 0 5px rgba(0,0,0,.7);
}

.panel-title {
  margin: -9px -9px 9px;
  padding: 7px 8px;
  color: #80d8f5;
  font-size: 10px;
  font-weight: bold;
  border-bottom: 1px solid #0d7398;
  background: linear-gradient(180deg, #123849, #071b26);
  text-shadow: 0 0 5px rgba(0,180,255,.6);
}

.panel a {
  display: block;
  position: relative;
  margin: 6px 0;
  padding: 7px 8px;
  color: #70c1df;
  text-decoration: none;
  border: 1px solid #074764;
  background: rgba(1,11,17,.7);
}

.panel a:hover {
  color: #c9f5ff;
  border-color: #20a6d6;
  background: #082432;
}

/* Левая кнопка "МУЗЫКА" тоже получает тот же эффект */
.panel .music-link {
  overflow: visible;
}

.panel .music-link::before {
  content: "";
  position: absolute;
  z-index: 10;
  pointer-events: none;
  inset: -7px;
  opacity: 0;
  border: 3px solid #e00000;
  clip-path: polygon(
    0 8%, 8% 2%, 18% 5%, 29% 1%, 40% 4%, 52% 0,
    64% 4%, 75% 1%, 87% 5%, 100% 2%, 97% 17%, 100% 31%,
    97% 45%, 100% 60%, 96% 75%, 100% 93%, 88% 97%,
    76% 100%, 63% 96%, 51% 100%, 38% 96%, 25% 100%,
    12% 96%, 0 100%, 3% 84%, 0 68%, 3% 52%, 0 37%, 3% 22%
  );
  filter:
    drop-shadow(2px 0 #750000)
    drop-shadow(-1px 1px #ff2929)
    drop-shadow(0 0 3px rgba(255,0,0,.7));
  transform: rotate(-.8deg);
  animation: grunge-frame .27s steps(2, end) infinite;
}

.panel .music-link::after {
  content: "";
  position: absolute;
  z-index: 9;
  pointer-events: none;
  width: 90px;
  height: 75px;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 5% 50%, #ff2020 0 1.5px, transparent 3px),
    radial-gradient(circle at 20% 12%, #c00000 0 1px, transparent 3px),
    radial-gradient(circle at 35% 88%, #e00000 0 1px, transparent 3px),
    radial-gradient(circle at 55% 4%, #ff3030 0 1.5px, transparent 3px),
    radial-gradient(circle at 78% 95%, #b80000 0 1px, transparent 3px),
    radial-gradient(circle at 98% 46%, #ff1717 0 1.5px, transparent 3px);
  filter: drop-shadow(0 0 3px rgba(255,0,0,.8));
}

.panel .music-link:hover::before {
  opacity: 1;
}

.panel .music-link:hover::after {
  opacity: 1;
  animation: particle-burst .85s linear infinite, particle-jitter .2s steps(2,end) infinite;
}

.main {
  min-width: 0;
}

.location {
  padding: 7px 8px;
  margin-bottom: 10px;
  color: #4c9ab8;
  border-bottom: 1px solid #12465d;
  font-size: 10px;
}

.welcome {
  min-height: 135px;
  padding: 30px 24px;
  border: 1px solid #08779d;
  background:
    radial-gradient(circle at 70% 45%, rgba(10,86,116,.22), transparent 45%),
    linear-gradient(180deg, #08202b, #031019);
  box-shadow: inset 0 0 25px rgba(0,140,200,.08);
}

.welcome h2 {
  margin: 0 0 10px;
  color: #9de4fb;
  font-family: Georgia, serif;
  font-size: 26px;
  text-shadow: 0 0 8px rgba(50,190,240,.55);
}

.big-text {
  margin: 0;
  color: #4e94b1;
  font-size: 11px;
  letter-spacing: 2px;
}

.database {
  min-height: 320px;
  margin-top: 10px;
  padding: 23px 18px;
  border: 1px dashed #0a6483;
  background: rgba(2,14,21,.72);
  box-shadow: inset 0 0 20px rgba(0,100,150,.04);
}

.database p,
.text p,
.panel p {
  margin: 0 0 10px;
}

.database p {
  color: #5da7c3;
}

.section-title {
  margin: 18px 0 16px;
  color: #72c9e9;
  font-size: 15px;
  border-bottom: 1px solid #0d536b;
  padding-bottom: 7px;
}

.about-block {
  margin-top: 8px;
  padding: 0 6px 18px;
}

.text {
  line-height: 1.8;
  color: #82bdd0;
  font-size: 15px;
}

.text p {
  margin: 0 0 17px;
}

.text .intro-line {
  color: #a6e5f7;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(40,190,240,.35);
}

.database {
  margin-top: 8px;
}

.signal {
  height: 18px;
  margin-top: 6px;
  background: repeating-linear-gradient(
    90deg,
    #0a4960 0 4px,
    transparent 4px 8px
  );
  border-bottom: 1px solid #087da5;
}

b {
  color: #6cff9b;
}

hr {
  border: 0;
  border-top: 1px solid #34505a;
}

footer {
  padding: 20px 0 35px;
  color: #376d82;
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  border-top: 1px solid #103b4c;
}

/* The header, panels and footer share one inset content layer.
   Rails occupy x=4..27px; content starts at 34px, leaving a physical gap. */
.site-content-shell {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* -------------------------
   АДАПТИВ
   ------------------------- */

@media (max-width: 760px) {
  .site {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .site::before,
  .site::after,
  .site > .screw {
    display: none;
  }

  .header {
    min-height: auto;
    padding: 28px 15px 24px;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .main {
    order: 1;
  }

  .left {
    order: 2;
  }

  .right {
    order: 3;
  }

  .main-nav {
    gap: 6px;
  }

  .main-nav a {
    min-width: 0;
    padding: 10px 12px;
    flex: 1;
  }
}

/* Idle phosphor glow — slow, independent pulses on every home-page button. */
.main-nav a:not(:hover):not(:focus-visible),
.panel a:not(:hover):not(:focus-visible) {
  animation: idle-blue-glow 4.8s ease-in-out infinite;
}
.main-nav a:nth-child(2), .panel a:nth-of-type(2) { animation-delay: -1.7s; }
.main-nav a:nth-child(3), .panel a:nth-of-type(3) { animation-delay: -3.2s; }
.main-nav a, .panel a {
  box-shadow: inset 0 0 9px #279ad51c, 0 0 7px #34baff30;
  text-shadow: 0 0 7px #66d6ff55;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.main-nav a:focus-visible, .panel a:focus-visible {
  outline: 2px solid #adf0ff;
  outline-offset: 4px;
}
@keyframes idle-blue-glow {
  0%, 100% { border-color: #267d9f; box-shadow: inset 0 0 8px #279ad51c, 0 0 6px #34baff30; text-shadow: 0 0 5px #66d6ff45; }
  48% { border-color: #42a7cd; box-shadow: inset 0 0 12px #279ad52b, 0 0 13px #34baff48, 0 0 22px #159ee015; text-shadow: 0 0 9px #66d6ff88; }
  66% { border-color: #348bae; box-shadow: inset 0 0 9px #279ad521, 0 0 8px #34baff38; text-shadow: 0 0 6px #66d6ff60; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav a, .panel a, .main-nav a::before, .main-nav a::after,
  .panel a::before, .panel a::after { animation: none !important; transition: none; }
}