@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

    :root{
      --cream:#f4f0e6;--panel-beige:#e8e2d4;--metal:#d4cfc4;--dark-metal:#a8a399;--ink:#2c2c2c;
      --radar-red:#b22222;--radar-red-dark:#8b1a1a;--accent-green:#74bc89;--accent-gold:#f6c744;
      --bg:#e5dfd2;--green-strong:#2d7755;--green-soft:#9fe2bf;

      --crt-max: 500px;
      --startup-y: 8%;
      --title-date-gap: 0px;

      /* typografia sekcji Informacje */
      --read-width: 66ch;
      --leading: 1.75;
      --paragraph-gap: 18px;
    }

    *{box-sizing:border-box;touch-action:manipulation;margin:0;padding:0}
    html,body{height:100%;background:var(--bg);font-family:'Orbitron',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);letter-spacing:.3px}
    body{padding:clamp(8px,2.5vmin,16px);display:grid;place-items:center}

    .instrument{
      width:min(100vw - clamp(8px,2.5vmin,16px)*2,90vw);
      max-width:1200px;background:linear-gradient(145deg,var(--cream) 0%,var(--panel-beige) 100%);
      border-radius:14px;border:6px ridge var(--metal);
      box-shadow:0 20px 50px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.08);
      position:relative;animation:samploskopStart 1.5s ease-out;
    }
    @keyframes samploskopStart{0%{transform:scale(.95);opacity:0}50%{transform:scale(1.02);opacity:.8}100%{transform:scale(1);opacity:1}}

    .frame{position:absolute;inset:10px;border-radius:8px;border:2px solid var(--dark-metal);pointer-events:none;opacity:.9}
    .pad{padding:20px;display:grid;gap:16px}
    .module{position:relative;background:var(--metal);border:4px ridge var(--dark-metal);border-radius:12px;padding:16px 12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.1)}
    .label{position:absolute;left:50%;transform:translateX(-50%);top:-11px;padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;background:linear-gradient(145deg,var(--cream),#f8f4ea);border:2px solid var(--dark-metal);border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
    .screws{position:absolute;inset:0;pointer-events:none}
    .screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(closest-side,var(--dark-metal),#4e4a43);box-shadow:inset 0 0 1px 1px rgba(255,255,255,.25)}
    .screw:nth-child(1){top:6px;left:6px}.screw:nth-child(2){top:6px;right:6px}.screw:nth-child(3){bottom:6px;left:6px}.screw:nth-child(4){bottom:6px;right:6px}

    .topbar{text-align:center;font-weight:900;font-size:clamp(18px,5vw,28px);letter-spacing:1px;margin-bottom:2px}
    .subtitle{text-align:center;font-size:13px;margin-top:-8px;opacity:.8;text-transform:uppercase;letter-spacing:1px}

    /* czerwony moduł */
    .red{
      background:linear-gradient(145deg,var(--radar-red) 0%,var(--radar-red-dark) 100%);
      border-color:var(--dark-metal);color:#fafafa;
      box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.3), 0 0 15px rgba(178,34,34,.4);
      padding:26px 16px; margin-top:12px;
    }
    .red .label{border:2px solid var(--radar-red-dark);top:-6px;color:var(--ink)!important;}

    .radar{display:grid;grid-template-columns:1fr;place-items:center;gap:20px}
    .radarRow{display:grid;grid-template-columns:minmax(300px,500px) auto;justify-content:center;align-items:center;gap:40px;width:100%;max-width:700px;margin:0 auto}

    .crt-screen{
      position:relative;width:100%;max-width:var(--crt-max);
      aspect-ratio:4/3;background:radial-gradient(ellipse at center,#1a2a1a 0%,#0a0f0a 70%,#000 100%);
      border-radius:15%;border:8px solid #2a2a2a;box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 0 20px rgba(116,188,137,.4), 0 0 40px rgba(0,0,0,.6);
      overflow:hidden
    }
    .crt-screen.off .crt-content,.crt-screen.off .crt-scanlines,.crt-screen.off .crt-glitch,.crt-screen.off .crt-interlace,.crt-screen.off .crt-noise{display:none}
    .crt-screen.off{background:#0a0a0a;box-shadow:inset 0 0 30px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.4)}

    /* beam collapse przy wyłączaniu */
    .crt-screen.collapse .crt-content{animation:tubeCollapse .5s cubic-bezier(.4,0,.2,1) forwards;}
    @keyframes tubeCollapse{0%{transform:scaleY(1);opacity:1}60%{transform:scaleY(.08);opacity:1}100%{transform:scaleY(.02);opacity:0}}
    .beamline{position:absolute;left:0;top:50%;height:2px;width:100%;background:linear-gradient(90deg,transparent,#9ff7c9,transparent);opacity:0;transform:translateY(-1px);pointer-events:none;z-index:5;}
    .crt-screen.collapse .beamline{animation:beamFlash .5s ease-in forwards;}
    @keyframes beamFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

    .crt-content{position:absolute;inset:8%;border-radius:8%;overflow:hidden;background:#0a0a0a;display:grid;place-items:center;transform-origin:center}
    #waveCanvas{width:100%;height:100%;display:block;z-index:1}

    .logo-display{position:absolute;inset:0;display:grid;place-items:center;z-index:4;background:rgba(10,15,10,0.08)}
    .logo-image,.logo-fallback{max-width:70%;max-height:60%;object-fit:contain;opacity:0;transform:scale(.8);transition:all 1.0s ease;filter:brightness(1.2) contrast(1.15) drop-shadow(0 0 20px rgba(116,188,137,0.3))}
    .logo-image.show,.logo-fallback.show{opacity:.95;transform:scale(1)}
    .logo-image.hide,.logo-fallback.hide{opacity:0;transform:scale(1.06);transition:all .8s ease}
    .logo-fallback{display:none;font-weight:900;color:#bfffd9;text-shadow:0 0 12px #57d39b;font-size:clamp(24px,6vw,48px);}

    .startup-display{position:absolute;inset:0;display:grid;place-items:center;z-index:3;text-align:center;gap:var(--title-date-gap);transform:translateY(var(--startup-y));}
    .welcome-text{font-family:'Orbitron',monospace;font-size:clamp(16px,4vw,24px);color:#00ff00;text-shadow:0 0 10px #00ff00,0 0 20px #00ff00;opacity:0;transform:translateY(14px);transition:all 1.0s ease;}
    .welcome-text.show{opacity:1;transform:translateY(0)}
    .launch-date{font-family:'Orbitron',monospace;font-size:clamp(14px,3vw,18px);color:#00cc00;text-shadow:0 0 8px #00cc00;opacity:0;transform:translateY(14px);transition:all 1.0s ease;}
    .launch-date.show{opacity:1;transform:translateY(0)}

    .crt-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,255,0,.03) 2px,rgba(0,255,0,.03) 4px);pointer-events:none;animation:scanlineMove .1s linear infinite}
    .crt-glitch{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(116,188,137,.1) 50%,transparent 100%);animation:crtGlitch 3s infinite;pointer-events:none}
    .crt-interlace{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(80,255,120,.12) 0,rgba(80,255,120,.12) 1px,transparent 1px,transparent 3px);mix-blend-mode:screen;opacity:.25;animation:interlaceShift .06s steps(2) infinite}
    .crt-noise{position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.9"/></svg>');background-size:120px 120px;background-repeat:repeat;animation:noiseShift .8s steps(10) infinite}

    .power-lamp{position:absolute;top:12px;left:12px;width:16px;height:16px;border-radius:50%;border:2px solid #345;background:#0a1a12;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);display:none;}
    .power-lamp.on{background:radial-gradient(closest-side,#baffd6,#0b8a4e);box-shadow:0 0 10px #57d39b, inset 0 1px 2px rgba(0,0,0,.6)}

    .side-stack{display:grid;place-items:center;height:100%}
    .side-btn{position:relative;width:80px;height:80px;border-radius:50%;border:6px ridge var(--metal);background:radial-gradient(closest-side,var(--green-soft),var(--green-strong));box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.25),0 0 15px rgba(45,119,85,.4);color:#fff;font-weight:900;font-size:14px;text-transform:uppercase;cursor:pointer;transition:all .2s ease;display:grid;place-items:center;animation:sidePulse 1.8s ease-in-out infinite}
    .side-btn.on{background:radial-gradient(closest-side,var(--accent-gold),#e6b330);box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.25),0 0 20px rgba(246,199,68,.6)}
    @keyframes sidePulse{0%,100%{transform:scale(1);box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.25),0 0 15px rgba(45,119,85,.4)}50%{transform:scale(1.04);box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 10px 22px rgba(0,0,0,.30),0 0 22px rgba(45,119,85,.55)}}
    .side-btn:hover{transform:translateY(-1px)}
    .side-btn:active{transform:translateY(1px) scale(.98)}
    .label-text{position:relative;z-index:2;letter-spacing:1px}

    /* Sekcja Informacje — poprawna szpalta + widoczna etykieta */
    .module.info-section{margin-top:12px;}
    .info-section .label{top:-8px;color:var(--ink);z-index:3;}
    .info-section .module-inner{
      background: var(--cream);
      border: 2px solid var(--dark-metal);
      border-radius: 10px;
      padding: clamp(18px, 2.4vmin, 28px) clamp(18px, 3.2vmin, 36px);
      max-width: var(--read-width);
      margin-inline: auto;
      text-align: left;
      line-height: var(--leading);
      text-wrap: pretty;
      hyphens: auto;
    }
    .info-text{margin-bottom: var(--paragraph-gap);font-size: clamp(14px, 1.4vw, 17px);letter-spacing: .1px;}
    .info-section .module-inner > :last-child{margin-bottom:0;}

    @media (max-width:768px){
      .radarRow{grid-template-columns:1fr;justify-content:center;gap:20px;padding:8px 6px 2px;max-width:none}
      .crt-screen{width:min(85vw,400px);max-width:none}
      .side-btn{width:70px;height:70px;font-size:12px}
      .status-panel{position:static;justify-content:center;margin:16px 0}
    }
    @media (max-width:480px){.side-btn{width:60px;height:60px;font-size:10px}}
    @media (min-width:1200px){:root{--read-width:60ch;--leading:1.8}}
    @media (min-width:1600px){:root{--read-width:58ch}}

    /* 1) Zgaś poziomy scroll na wszelki wypadek */
html, body { overflow-x: hidden; }

/* 2) Instrument nie szerszy niż viewport + ładne centrowanie */
.instrument {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* 3) Gridy i panele mogą się realnie zwężać (domyślnie min-width:auto potrafi wypychać) */
.module,
.radarRow,
.module-inner,
.crt-screen,
.side-stack { min-width: 0; }

/* 4) Główna siatka modułu z ekranem i przyciskiem: elastyczne przerwy i brak „sztywnego” max-width */
.radarRow {
  width: 100%;
  max-width: none;
  gap: clamp(12px, 4vw, 40px);
}

/* 5) Na tabletach i mniejszych — pionowa kolumna (guzik pod ekranem) */
@media (max-width: 920px) {
  .radarRow { grid-template-columns: 1fr; }
}

/* 6) Ekran CRT zawsze mieści się w kolumnie */
.crt-screen {
  width: 100%;
  max-width: 480px;    /* bezpieczna górna granica */
}
@media (max-width: 480px) {
  .crt-screen { max-width: 100%; }
}

/* 7) Oddech i wysokość czerwonego panelu bez wyciekania etykiety */
.red {
  padding: clamp(16px, 4.5vw, 26px) 12px;
  margin-top: clamp(8px, 2vw, 12px);
}

/* 8) Etykiety — bliżej krawędzi, ale bez wychodzenia; na mini-telefonach lekki scale */
.label { top: -8px; }
.red .label,
.info-section .label { top: -6px; }

@media (max-width: 420px) {
  .label { top: -2px; transform: translateX(-50%) scale(.92); }
  .module { padding-top: 22px; } /* trochę miejsca nad treścią na „wciętą” etykietę */
}

/* 9) Panel statusu — zawsze w obrębie ramki */
.status-panel { inset: auto; }
@media (max-width: 768px) {
  .status-panel { position: static; justify-content: center; margin: 12px 0 0; }
}

/* 10) Przyciski po prostu mniejsze na bardzo wąskich ekranach */
@media (max-width: 480px) {
  .side-btn { width: 56px; height: 56px; font-size: 10px; }
}

/* 11) Media nigdy nie przeskalują szerzej niż rodzic */
img, canvas, video { max-width: 100%; height: auto; display: block; }

/* 12) Info: wąska, wycentrowana kolumna (zostają Twoje zmienne) */
.info-section .module-inner {
  max-width: var(--read-width);
  margin-inline: auto;
}

/* ————— KOŁO: ekran CRT jako okrąg ————— */
.crt-screen{
  position: relative;
  width: 100%;
  max-width: var(--crt-max);
  aspect-ratio: 1 / 1;                 /* koło */
  background: radial-gradient(circle at 50% 50%, #1a2a1a 0%, #0a0f0a 70%, #000 100%);
  border-radius: 50%;                  /* koło */
  border: 8px solid #2a2a2a;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.8),
    0 0 20px rgba(116,188,137,.4),
    0 0 40px rgba(0,0,0,.6);
  overflow: hidden;                    /* wszystko w środku przycięte do koła */
}

/* przy wyłączonym — też koło, mocniej zgaszone */
.crt-screen.off{
  background:#0a0a0a;
  box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.4);
}

/* zawartość w środku – również koło, z marginesem „ramki” */
.crt-content{
  position:absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  background:#0a0a0a;
  display:grid;
  place-items:center;
  transform-origin:center;
}

/* elementy nakładkowe też „okrągłe”, żeby nic nie wystawało */
.crt-scanlines,
.crt-glitch,
.crt-interlace,
.crt-noise,
#waveCanvas{
  border-radius: 50%;
}

/* linia „beam” przez średnicę */
.beamline{
  position:absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  transform: translateY(-1px);
  background: linear-gradient(90deg, transparent, #9ff7c9, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* dopasowanie responsywne: możesz zachować wcześniejsze ograniczenie,
   ale warto spiąć z Twoją zmienną */
.crt-screen{ max-width: var(--crt-max); }
@media (max-width: 480px){
  .crt-screen{ max-width: 100%; }
}