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

/* =====================================================================
   Oispa-pelisarja – Rifpelit-brändin ulkoasu (override)
   Ladataan main.css:n JÄLKEEN. Tyylittelee yhteisen "kromin"
   (fontti, otsikko, pisteet, napit, viesti, tulostaulu, jako).
   EI koske pelien teemalaattoihin (.tile-*) eikä taustakuvaan.
   ===================================================================== */

html, body, h1.title, button, input, select, textarea, a,
.score-container, .best-container, .tile .tile-inner {
  font-family: 'Poppins', 'Inter', Arial, sans-serif !important;
}

/* Otsikko */
h1.title {
  font-weight: 800 !important;
  color: #ff1919 !important;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 14px rgba(255, 25, 25, 0.45);
}

/* Sisältöpaneeli */
.container {
  background: rgba(15, 15, 15, 0.82) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Pistelaatikot */
.score-container, .best-container {
  background: rgba(20, 20, 20, 0.92) !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.score-container:after, .best-container:after {
  color: #ff5a5a !important;
  font-weight: 600 !important;
}

/* Napit ja nappimaiset linkit (brändigradientti + hehku) */
.go-katko, .more-games-button,
.game-message a, a.retry-button, a.keep-playing-button,
#score-form button, .games-container a, .buttons-container a:not(.show-info) {
  background: linear-gradient(135deg, #ff1919, #ff3b3b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(255, 25, 25, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.go-katko:hover, .more-games-button:hover,
.game-message a:hover, a.retry-button:hover, a.keep-playing-button:hover,
#score-form button:hover, .games-container a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(255, 25, 25, 0.5) !important;
}

/* "OHJEET" -nappi hillitympänä */
.show-info {
  background: #232323 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.show-info:hover { background: #2a2a2a !important; }

/* Jako-osio */
.share-container { color: #f5f5f5 !important; }
.share-container button {
  background: linear-gradient(135deg, #ff1919, #ff3b3b) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

/* Voitto/häviö-viesti */
.game-container .game-message {
  background: rgba(10, 10, 10, 0.92) !important;
  border-radius: 16px !important;
  color: #fff !important;
}
.game-container .game-message p { color: #fff !important; }
.game-container .game-message.game-won {
  background: linear-gradient(135deg, rgba(240, 176, 0, 0.30), rgba(54, 194, 90, 0.22)) !important;
}

/* Tulostaulu */
#highscores h3 { color: #ff1919 !important; }
.highscore-table, #highscore-list {
  background: rgba(20, 20, 20, 0.92) !important;
  border-radius: 12px !important;
  overflow: hidden;
  color: #f5f5f5 !important;
}
.highscore-table th, #highscore-list th {
  background: #ff1919 !important;
  color: #fff !important;
}
.highscore-table td, .highscore-table th,
#highscore-list td, #highscore-list th {
  border-color: #2a2a2a !important;
}

/* Tulostaulun lomake */
#score-form input, #player-name {
  background: #232323 !important;
  color: #fff !important;
  border: 1.5px solid #2a2a2a !important;
  border-radius: 8px !important;
}
#score-form input:focus, #player-name:focus {
  border-color: #ff1919 !important;
  outline: none !important;
}

/* =====================================================================
   Asettelu + nappien koot
   ===================================================================== */

/* Otsikko + pisteet siistiksi riviksi (ei floatteja) */
.heading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
h1.title { float: none !important; }
.scores-container { float: none !important; }
.score-container, .best-container { font-size: 22px !important; }

/* Nappirivi: keskitetty, automaattinen leveys (ei 200px lukitusta) */
.buttons-container {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  margin: 22px auto 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}
.games-container, .share-container { flex-basis: 100% !important; margin-top: 6px !important; }

/* Nappikonttien laatikkotyyli pois -> vain itse nappi näkyy */
.katko-container, .info-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
  font-size: inherit !important;
  margin: 0 !important;
}
.katko-container:hover, .info-container:hover { border: none !important; }

/* Napit yhtenäisen kokoisiksi ja luettaviksi (EI display – säilytetään main.css:n näkyvyyslogiikka) */
.go-katko, .show-info, .more-games-button,
.game-message a, a.retry-button, a.keep-playing-button, #score-form button {
  padding: 12px 22px !important;
  font-size: 0.95rem !important;
  line-height: 1.1 !important;
  min-width: 120px;
  text-align: center !important;
}
/* display:inline-block vain aina näkyville napeille */
.go-katko, .show-info, .more-games-button, #score-form button { display: inline-block !important; }
/* "Jatka keräämistä" näkyy VAIN voittotilanteessa, ei häviössä */
.game-container .game-message a.keep-playing-button { display: none !important; }
.game-container .game-message.game-won a.keep-playing-button { display: inline-block !important; }

/* Jako-osio: ikonit laatoissa, nappi samaa linjaa */
.share-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.share-container > span { flex-basis: 100%; margin-bottom: 4px; font-weight: 700; color: #ff1919; }
.share-container > a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 !important;
  background: #232323; border: 1px solid #2a2a2a; border-radius: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.share-container > a:hover { transform: translateY(-2px); border-color: #ff1919; }
.share-container > a img { width: 26px !important; height: 26px !important; }
.share-container button { padding: 12px 18px !important; min-width: 0 !important; }