/* ===== MUSEO FONTY ===== */
@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-100.woff2') format('woff2'),
         url('./fonts/Museo-100.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-100Italic.woff2') format('woff2'),
         url('./fonts/Museo-100Italic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-300.woff2') format('woff2'),
         url('./fonts/Museo-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-300Italic.woff2') format('woff2'),
         url('./fonts/Museo-300Italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-500.woff2') format('woff2'),
         url('./fonts/Museo-500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-500Italic.woff2') format('woff2'),
         url('./fonts/Museo-500Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-700.woff2') format('woff2'),
         url('./fonts/Museo-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-700Italic.woff2') format('woff2'),
         url('./fonts/Museo-700Italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-900.woff2') format('woff2'),
         url('./fonts/Museo-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Museo';
    src: url('./fonts/Museo-900Italic.woff2') format('woff2'),
         url('./fonts/Museo-900Italic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ===== GLOBAL ===== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== CANVAS ===== */
#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ===== TOUCH / FOCUS FIX (MOBILE SAFE) ===== */
#startButton,
#pauseButton {
  border: none;
  outline: none;
  background: none;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#startButton:focus,
#startButton:active,
#pauseButton:focus,
#pauseButton:active {
  outline: none;
}

/* ===== START TLAČÍTKO ===== */
#startButton {
  position: relative;
  width: 20vw;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 0%, #e5e5e5 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  animation: pulse 1.25s infinite;
}

#startButton img {
  width: 55%;
  height: auto;
  pointer-events: none;
}

#startButton.flash {
  animation: none;
  box-shadow: 0 0 60px 20px rgba(255,255,255,0.9);
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70%  { box-shadow: 0 0 0 30px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ===== PAUSE / PLAY BUTTON ===== */
#pauseButton {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 3;
  display: none;
}

#pauseButton img {
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ===== TEXT ===== */
#message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1000px;
  padding: 0 5%;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  letter-spacing: 0.08em;
  opacity: 0;
  z-index: 2;
  text-shadow: 0 0 16px rgba(255,255,255,0.5);

  font-family: 'Museo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
}

#message .strong {
  font-family: 'Museo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Logo pod textem */
#message .logo {
  display: block;
  margin: 1.2em auto 0;
  width: clamp(120px, 20vw, 220px);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* DESKTOP */
@media (min-width: 1024px) {
  #message {
    font-size: clamp(1.4rem, 3.5vw, 2.9rem);
  }
}

/* MOBIL */
@media (max-width: 768px) {
  #message {
    font-size: clamp(1.8rem, 5vw, 3.7rem);
  }

  #startButton {
    width: 40vw;
  }
}