/* ======================================================
   Sayonara_Alice.exe — v72 Memory Spine
   Replaces the historical canvas/train-track scrollbar.
====================================================== */

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.v72-memory-spine {
  --spine-progress: 0;
  position: fixed;
  top: clamp(104px, 13vh, 146px);
  right: 8px;
  bottom: clamp(30px, 5vh, 62px);
  z-index: 15400;
  width: 54px;
  opacity: 0;
  translate: 18px 0;
  pointer-events: none;
  transition: opacity .55s ease, translate .8s cubic-bezier(.16,1,.3,1);
  contain: layout style;
}

body.has-entered .v72-memory-spine,
body.v72-archive .v72-memory-spine {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.v72-spine-track {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 15px;
  width: 24px;
  cursor: ns-resize;
  touch-action: none;
}

.v72-spine-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(117,232,255,.24) 7%, rgba(82,167,255,.16) 90%, transparent);
  box-shadow: 0 0 11px rgba(0,211,255,.12);
}

.v72-spine-progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 0;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #dcffff 0%, #59efff 38%, #4072ff 100%);
  box-shadow: 0 0 6px rgba(112,242,255,.76), 0 0 17px rgba(27,159,255,.4);
  will-change: height;
}

.v72-spine-thumb {
  position: absolute;
  left: 50%;
  top: 0;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 7px rgba(105,239,255,.8)) drop-shadow(0 0 17px rgba(64,114,255,.42));
  pointer-events: none;
  will-change: top;
}

.v72-spine-thumb::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(147,244,255,.23);
  border-radius: 50%;
  animation: v72SpineHalo 3.4s ease-in-out infinite;
}

.v72-spine-thumb svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  overflow: visible;
}

.v72-spine-petal {
  fill: rgba(196,252,255,.86);
  stroke: rgba(255,255,255,.9);
  stroke-width: .7;
}

.v72-spine-core {
  fill: #fff;
  filter: drop-shadow(0 0 3px #77f3ff);
}

.v72-spine-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v72-spine-node {
  --node-y: 0%;
  position: absolute;
  right: 13px;
  top: var(--node-y);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(166,235,255,.48);
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.v72-spine-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #071324;
  border: 1px solid rgba(119,230,255,.54);
  box-shadow: 0 0 0 3px rgba(5,16,31,.8), 0 0 9px rgba(53,199,255,.2);
  transition: width .3s ease, height .3s ease, background .3s ease, box-shadow .3s ease;
}

.v72-spine-node-label {
  position: absolute;
  top: 50%;
  right: 25px;
  min-width: 46px;
  padding: .34rem .42rem;
  transform: translate(6px, -50%);
  border: 1px solid rgba(111,224,255,.12);
  border-radius: 999px;
  background: rgba(2,8,18,.72);
  color: rgba(201,246,255,.58);
  opacity: 0;
  white-space: nowrap;
  text-align: center;
  font: 700 .54rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1), color .25s ease;
}

.v72-spine-node:hover .v72-spine-node-label,
.v72-spine-node:focus-visible .v72-spine-node-label,
.v72-spine-node.is-active .v72-spine-node-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.v72-spine-node:hover,
.v72-spine-node:focus-visible {
  outline: none;
}

.v72-spine-node:hover::before,
.v72-spine-node:focus-visible::before,
.v72-spine-node.is-active::before {
  width: 8px;
  height: 8px;
  background: #c8fbff;
  box-shadow: 0 0 0 3px rgba(3,17,31,.8), 0 0 9px rgba(89,234,255,.92), 0 0 20px rgba(64,114,255,.42);
}

.v72-spine-node.is-passed::before {
  background: #65eaff;
  border-color: #d7ffff;
}

.v72-spine-caption {
  position: absolute;
  right: 5px;
  bottom: -24px;
  color: rgba(123,220,255,.28);
  font: 700 .48rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .11em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  pointer-events: none;
}

.v72-mobile-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 26000;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: rgba(74,169,255,.08);
  transition: opacity .35s ease;
}

.v72-mobile-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--spine-progress));
  background: linear-gradient(90deg, #9af8ff, #21d9ff 60%, #6076ff);
  box-shadow: 0 0 9px rgba(45,218,255,.65);
  will-change: transform;
}

@keyframes v72SpineHalo {
  0%, 100% { opacity: .25; transform: scale(.86) rotate(0deg); }
  50% { opacity: .72; transform: scale(1.08) rotate(45deg); }
}

@media (max-width: 980px) {
  .v72-memory-spine { right: 1px; width: 43px; }
  .v72-spine-track { right: 8px; }
  .v72-spine-node { right: 6px; }
  .v72-spine-node-label,
  .v72-spine-caption { display: none; }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .v72-memory-spine { display: none !important; }
  body.has-entered .v72-mobile-progress,
  body.v72-archive .v72-mobile-progress { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .v72-memory-spine { display: none !important; }
  .v72-mobile-progress { display: none !important; }

  html,
  body {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: #2bcfe9;
    border-radius: 999px;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: #050813;
  }
}