/* Kręgosłup 3D w stylu ryciny. Kontener: <div class="kregoslup-3d"> z obrazkiem zastępczym i podpisem bólu. */
.kregoslup-3d {
  --kr3d-tlo: #EEF0E8;
  --kr3d-tusz: #1E2B1A;
  --kr3d-szary: #4A5546;
  --kr3d-koral: #E8775A;
  --kr3d-koral-tusz: #8A3420;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--kr3d-tlo);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  color: var(--kr3d-tusz);
  font-family: Inter, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.kr3d-zastepczy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 400ms ease-out, visibility 0s 400ms;
}
.kr3d-gotowy .kr3d-zastepczy { opacity: 0; visibility: hidden; }

.kr3d-plotno {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y; /* poziomo obraca, pionowo przewija stronę */
  cursor: grab;
  opacity: 0;
  transition: opacity 400ms ease-out;
}
.kr3d-gotowy .kr3d-plotno { opacity: 1; }
.kr3d-plotno:active { cursor: grabbing; }

.kr3d-poswiata {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(232 119 90 / 0.5), rgb(232 119 90 / 0.18) 55%, rgb(232 119 90 / 0));
  opacity: 0;
  pointer-events: none;
}

.kr3d-linie {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.kr3d-linie line { stroke: var(--kr3d-tusz); stroke-width: 1; opacity: 0.75; }
.kr3d-linie circle { fill: var(--kr3d-tusz); }
.kr3d-linie .kr3d-linia-bol line { stroke: var(--kr3d-koral-tusz); }
.kr3d-linie .kr3d-linia-bol circle { fill: var(--kr3d-koral-tusz); }
.kr3d-linie g { opacity: 0; transition: opacity 200ms ease-out; }
.kr3d-linie g.kr3d-widoczny { opacity: 1; }

.kr3d-podpis {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  margin: 0;
  font: 500 13px/1.25 "IBM Plex Mono", ui-monospace, monospace;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}
.kr3d-podpis.kr3d-widoczny { opacity: 1; }
.kr3d-krotki { white-space: nowrap; }
.kr3d-opis { display: none; margin-top: 2px; font: 400 13px/1.3 Inter, system-ui, sans-serif; color: var(--kr3d-szary); }
.kr3d-pelny .kr3d-opis { display: block; }

/* Podpis bólu: bez JS i bez WebGL stoi obok dysku L4–L5 na obrazku zastępczym, z JS idzie za dyskiem */
.kr3d-bol {
  position: absolute;
  left: 70%;
  top: calc(46.5% - 11px);
  z-index: 3;
  max-width: 28%;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}
.kr3d-bol::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  top: 11px;
  width: 11cqw;
  height: 1px;
  background: var(--kr3d-koral-tusz);
}
.kr3d-aktywny .kr3d-bol::before { content: none; }
.kr3d-bol strong { display: block; font-size: 17px; font-weight: 650; color: var(--kr3d-koral-tusz); }
.kr3d-aktywny .kr3d-bol {
  left: 0;
  top: 0;
  bottom: auto;
  max-width: 28%;
  opacity: 0;
  transition: opacity 300ms ease-out;
  pointer-events: none;
}
.kr3d-aktywny .kr3d-bol.kr3d-widoczny { opacity: 1; }

.kr3d-podpowiedz {
  position: absolute;
  left: 14px;
  bottom: 23px;
  max-width: calc(100% - 170px); /* nie wchodzi pod „Rozsuń kręgi” */
  z-index: 3;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(238 240 232 / 0.85);
  font: 400 12px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--kr3d-szary);
  transition: opacity 300ms ease-out;
  pointer-events: none;
}
.kr3d-podpowiedz[hidden] { display: block; opacity: 0; }

.kr3d-przycisk {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  min-width: 96px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgb(30 43 26 / 0.3);
  border-radius: 999px;
  background: rgb(250 250 244 / 0.9);
  color: var(--kr3d-tusz);
  font: 500 14px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 150ms ease-out;
}
.kr3d-przycisk:hover { background: #fff; border-color: rgb(30 43 26 / 0.6); }
.kr3d-przycisk:active { transform: scale(0.96); }
.kr3d-przycisk:focus-visible { outline: 2px solid #4E6B10; outline-offset: 3px; }

@media (max-width: 480px) {
  .kregoslup-3d { border-radius: 20px; }
  .kr3d-podpis { font-size: 12px; }
  .kr3d-aktywny .kr3d-bol { max-width: 30%; font-size: 13px; }
  .kr3d-bol strong { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .kregoslup-3d *, .kregoslup-3d *::before { transition: none !important; }
}