/* Minimal, biztonságos alap (nincs külső CSS framework) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.45; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
}

.pagehead { margin-bottom: 10px; }
.title { margin: 0 0 6px 0; font-size: 20px; }
.sub { margin: 0; font-size: 14px; opacity: 0.8; }

/* Viewer/stage: fix magasság a viewportból (desktop + modern mobil) */
.viewer {
  width: 100%;
}

/* A stage fogja meg a képet: legyen maximum a képernyőhöz kötve */
.stage {
  position: relative;
  width: 100%;

  /* Desktop: 78vh, Modern mobil: 78dvh (address bar problémák ellen) */
  height: 78vh;
  height: 78dvh;

  border-radius: 12px;
  overflow: hidden;
  background: #f6f6f6;

  /* középre igazítás */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kép: MAGASSÁGRA igazodjon (ez a kulcs), ne szélességre */
#diagramImage {
  display: block;

  /* a magasság a stage-hez igazodik */
  height: 100%;
  width: auto;

  /* de sose lógjon túl vízszintesen sem */
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}

/* SVG overlay: a stage teljes felületén ül (a JS-nek kell skálázni, ha pixelpontos kell) */
.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Hotspot polygon kattintható */
.hs {
  pointer-events: all;
  fill: rgba(255, 0, 0, 0.10);
  stroke: rgba(255, 0, 0, 0.75);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 120ms ease, stroke 120ms ease;
}

.hs:hover {
  fill: rgba(255, 0, 0, 0.18);
  stroke: rgba(255, 0, 0, 0.95);
}

/* Tooltip */
.tip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(12px, 12px);
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  max-width: min(320px, 92vw);
  display: none;
  z-index: 5;
}

.tip strong { display: block; margin-bottom: 2px; }

/* Alkatrész lista */
.partswrap { margin-top: 14px; }
.parts { padding-left: 18px; margin: 8px 0 0 0; }
.parts li { margin: 6px 0; }
.parts a { text-decoration: none; }
.parts a:hover { text-decoration: underline; }

/* Mobil finomhangolás */
@media (max-width: 520px) {
  .container { padding: 10px; }
  .title { font-size: 18px; }
  .sub { font-size: 13px; }

  .stage {
    height: 70vh;
    height: 70dvh;
    border-radius: 10px;
  }
}

/* =========================================================
   HOTSPOT "FELVILLANÁS" (csak CSS)
   A JS-nek elég a polygonokra rátenni: class="hs flash"
   ========================================================= */

@keyframes hsPulse {
  0%   { fill: rgba(255, 0, 0, 0.00); stroke: rgba(255, 0, 0, 0.00); }
  25%  { fill: rgba(255, 0, 0, 0.22); stroke: rgba(255, 0, 0, 0.95); }
  50%  { fill: rgba(255, 0, 0, 0.10); stroke: rgba(255, 0, 0, 0.75); }
  75%  { fill: rgba(255, 0, 0, 0.22); stroke: rgba(255, 0, 0, 0.95); }
  100% { fill: rgba(255, 0, 0, 0.10); stroke: rgba(255, 0, 0, 0.75); }
}

.hs.flash {
  animation: hsPulse 1.2s ease-in-out 0s 2;
}