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

:root { 
  --primary-bg: #3A5696;    /* syvä sininen */
  --primary-fg: #FFFFFF;    /* valkoinen teksti */
  --accent: #FDBC00;        /* oranssi/keltainen */
  --progress-start: #00c6ff; /* alku gradient */
  --progress-end: #0072ff;
  --btn-bg: #FDBC00;
  --btn-hover: #e6b300;
  --btn-border: #3A5696;
  --muted: #cfd9f0;
}

body { 
  margin:0; 
  font-family: 'Montserrat', sans-serif;
  background:var(--primary-bg); 
  color:var(--primary-fg); 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  height:100vh; 
  transition: background 0.5s;
}

body.ended {
  background: linear-gradient(90deg, #FDBC00, #3A5696);
  animation: pulseBG 3s infinite alternate;
}

@keyframes pulseBG {
  0% { background: linear-gradient(90deg, #FDBC00, #3A5696); }
  50% { background: linear-gradient(90deg, #FFD533, #2F4478); }
  100% { background: linear-gradient(90deg, #FDBC00, #3A5696); }
}

.time { 
  font-size: clamp(64px,15vw,180px); 
  font-weight:700; 
  text-align:center; 
  font-variant-numeric:tabular-nums; 
  margin:0; 
  letter-spacing: 2px;
}

.sub { 
  font-size: clamp(16px,3vw,28px); 
  color:var(--muted); 
  margin-top:10px; 
  text-align:center; 
  font-weight:400;
}

.controls { 
  margin:20px; 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
  justify-content:center; 
}

input[type=time],
input[type=text] { 
  font-size:18px; 
  padding:6px 10px; 
  font-family: 'Montserrat', sans-serif;
  border-radius: 6px;
  border:1px solid var(--btn-border);
  background: #FFFFFF;
  color: #000000;
}

button { 
  padding:10px 16px; 
  font-size:15px; 
  font-family: 'Montserrat', sans-serif;
  cursor:pointer; 
  background:var(--btn-bg); 
  color:var(--primary-bg); 
  border:1px solid var(--btn-border); 
  border-radius:8px; 
  font-weight:600;
  transition: background 0.3s, transform 0.1s;
}

button:hover { 
  background:var(--btn-hover); 
}

button:active {
  transform: scale(0.97);
}

.hidden { display:none; }

.progress-wrap {
  width: 80%;
  max-width: 600px;
  height: 20px;
  background: #cfd9f0; /* vaalea harmaa pohja */
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}

.progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--progress-start), var(--progress-end));
  transition: width 1s linear, background 0.5s;
}

/* Loppuviesti */
.end-message {
  display: none;
  font-size: clamp(48px, 12vw, 120px);
  font-weight: 700;
  text-align: center;
  margin-top: 40px;
  background: linear-gradient(90deg, #FDBC00, #3A5696);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 3s linear infinite, blink 1s step-start infinite;
  flex-direction: column;
  gap: 20px;
}

.end-message.visible {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-name {
  font-size: clamp(16px, 3vw, 24px);
  color: #FFD533;
  margin-top: 5px;
  text-align: center;
  font-weight: 500;
}

a {
    color: white;
}

/* Animaatiot */
@keyframes rainbowText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes blink {
  50% { opacity: 0.5; }
}

.progress-wrap {
            display: flex;
            justify-content: center;
        }
        #youtube-video-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Piilota elementti, jos siinä on 'hidden'-luokka */
        .hidden {
            display: none !important;
       }


/* MikaKalpaFaniNappi -painikkeiden tyyli (musta-keltainen) */
.MikaKalpaFaniNappi {
    background-color: black; /* KalPa-musta tausta */
    color: yellow; /* KalPa-keltainen teksti */
    border: 2px solid yellow; /* Keltainen kehys, 2px paksu */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.MikaKalpaFaniNappi:hover {
    background-color: #333; /* Hieman vaaleampi musta hoverissa */
    color: white; /* Valkoinen teksti hoverissa */
    border-color: #eee; /* Vaaleampi keltainen/harmaa kehys hoverissa */
}
.MikaMujunenLogo {
    display: inline-block;
    padding: 2px 5px;
    background-color: transparent; /* Tausta täysin läpinäkyvä normaalitilassa */
    color: inherit; /* Tekstin väri periytyy vanhemmalta elementiltä, todennäköisesti musta tai valkoinen */
    border: 1px solid yellow;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    box-shadow: 0 0 5px yellow,
                0 0 10px rgba(255, 255, 0, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

.MikaMujunenLogo:hover {
    background-color: rgba(255, 255, 0, 0.1); /* Tausta läpinäkyvä keltainen hover-tilassa */
    color: black; /* Tekstin väri mustaksi hover-tilassa */
    border-color: #FFFF00;
    box-shadow:
        0 0 15px #FFFF00,
        0 0 30px rgba(255, 255, 0, 0.9),
        0 0 60px rgba(255, 255, 0, 0.7),
        0 0 100px rgba(255, 255, 0, 0.5);
    transform: translateY(-1px);
}