body { background: #030305 !important; }
/* PUZZELL public UI baseline — logo and menu intentionally unchanged. */
body { font-family: Tahoma, Arial, sans-serif !important; font-size: 16px; }
body *:not(.menu-title):not(.menu-title *) { font-family: Tahoma, Arial, sans-serif !important; }
body { position: relative; isolation: isolate; }
#pcb-wrap { display: none !important; }
#pcb-wrap .pcb-layer { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: .78; mix-blend-mode: screen; }
#pcb-wrap .pcb-layer-1, #pcb-wrap .pcb-layer-3, #pcb-wrap .pcb-layer-5 { opacity: .48; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(20,0,40,.20), transparent 58%); }
header, main, footer, .page-title, .stage-3d, .backdrop { position: relative; z-index: 1; }
body p, body li, body a, body button, body input, body textarea, body select, body label,
body h1, body h2, body h3, body h4, body h5, body h6, body .modal-title, body .modal-desc,
body .details, body .details h2, body .details p, body .about-text, body .about-text p,
body .idea-box, body .idea-box *, body .b, body .site-footer {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 16px;
}
/* Preserve the existing menu lettering exactly. */
body .menu-title, body .menu-title * {
  font-family: Caveat, cursive !important;
  font-size: 1.15rem !important;
}
/* Logo nie czeka na skrypt animacji — ma być widoczne od pierwszej klatki. */
.logo-mainframe .puzzell-path, .logo-mainframe .drop-path { opacity: .95 !important; }
/* Jednolity układ menu: większy oddech na desktopie, stabilne kafelki językowe. */
body .menu-container { max-width: 1450px; }
body .menu-grid { gap: clamp(32px, 5vw, 80px); }
body .menu-item { width: clamp(92px, 8vw, 125px); }
body .menu-title { width: 100%; min-height: 2.35em; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  body .menu-grid { gap: 14px 10px; }
  body .menu-item { width: 82px; }
  body .icon-container { width: 72px; height: 72px; }
  body .menu-title { font-size: 1.05rem !important; min-height: 2.5em; }
}
button, a.b, input, textarea, select { min-height: 44px; }
.btns-row { position: sticky; bottom: 0; z-index: 5; padding: 8px 0; background: linear-gradient(transparent, rgba(3,3,5,.96) 30%); }

/* Film window: kolor z admina tylko za grafiką */
.film-frame-window-bg {
  position: absolute; inset: 0; z-index: 0;
  background: #020204;
}
.graphic-wrap { position: relative; overflow: hidden !important; }
.graphic-wrap img, .slide-img {
  object-fit: cover !important;
  width: 100% !important; height: 100% !important;
}
/* Modal mobile: przyciski zawsze na ekranie */
@media (max-width: 767px) {
  .backdrop .modal-film {
    display: flex; flex-direction: column;
    max-height: 92vh; height: auto;
    overflow: hidden;
  }
  .backdrop .modal-film .sketch-container {
    flex: 1 1 auto; min-height: 0; max-height: 55vh;
  }
  .backdrop .modal-copy {
    flex: 0 0 auto; overflow-y: auto; max-height: 38vh;
    -webkit-overflow-scrolling: touch;
  }
  .btns-row {
    position: sticky; bottom: 0; z-index: 6;
    flex-direction: column; gap: 8px;
    padding: 10px 0 env(safe-area-inset-bottom, 8px);
    background: linear-gradient(transparent, rgba(3,3,5,.98) 25%);
  }
  .btns-row .b { width: 100%; min-height: 44px; }
}

/* KADR CLIP — mobile + desktop */
.film-svg foreignObject,
.frame-bg, .graphic-wrap {
  overflow: hidden !important;
  clip-path: inset(0);
}
.frame-bg img, .graphic-wrap img, .slide-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* MENU ICONS VISIBLE — bez JS też widać ikony */
.menu-path.draw-path,
.menu-svg .draw-path {
  stroke-dasharray: 100 !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
}
.menu-svg { overflow: visible; }

/* MOBILE MENU ICONS — zawsze widoczne nad tłem */
body .menu-container,
body .menu-grid,
body .menu-item,
body .icon-container {
  position: relative;
  z-index: 20 !important;
}
body .icon-container {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body .menu-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}
body .menu-path,
body .menu-svg .draw-path,
body .menu-svg .main-line,
body .menu-svg .sub-line {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  stroke-width: 3px !important;
}
body .m1-item .main-line { stroke: #ff007f !important; }
body .m1-item .sub-line { stroke: #ffea00 !important; }
body .m2-item .main-line { stroke: #00f0ff !important; }
body .m2-item .sub-line { stroke: #cc00ff !important; }
body .m3-item .main-line { stroke: #00ff66 !important; }
body .m3-item .sub-line { stroke: #ff6c00 !important; }
body .m4-item .main-line { stroke: #ffb700 !important; }
body .m4-item .sub-line { stroke: #00ffff !important; }
body .m5-item .main-line { stroke: #ff0033 !important; }
body .m5-item .sub-line { stroke: #7a00ff !important; }
body .m6-item .main-line { stroke: #ffb700 !important; }
body .m6-item .sub-line { stroke: #ff6ec7 !important; }
@media (max-width: 600px) {
  body .menu-item { width: 78px !important; min-width: 78px !important; }
  body .icon-container { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; }
  body .menu-path { stroke-width: 3.2px !important; }
  /* PCB nigdy nad menu */
  #pcb-wrap { z-index: 0 !important; pointer-events: none !important; }
  body header { position: relative; z-index: 30 !important; background: #000 !important; }
}

/* Stopka i cala tresć — Tahoma (menu/logo bez zmian) */
body .site-footer, body .site-footer *, body footer, body footer * {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 0.8rem !important;
}

/* MOBILE ONLY: grafika w kadrze — bez absolute (Safari bug = opadanie) */
@media (max-width: 900px) {
  .film-svg foreignObject {
    overflow: hidden !important;
  }
  .frame-bg, .graphic-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .frame-bg img, .graphic-wrap img, .slide-img,
  .film-segment img, .modal-film img {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  .film-segment .sketch-container,
  .film-segment .film-svg {
    width: 100% !important;
    height: 100% !important;
  }
}