/* games/random-checkout/style.css - STYLES FOR RANDOM CHECKOUT GAME */

/* Nadpisanie szerokości kontenera dla tej gry */
.container.wide-game {
    max-width: 1215px;
}

/* --- OGÓLNE STYLE GÓRNEGO BLOKU (Round/Title) --- */
.title-and-round-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding-bottom: 10px;
}

.game-title {
    color: #B0E3FF;
    font-size: 2.2em;
    font-weight: 700;
    text-align: left;
    margin: 0;
}

#round-display {
    font-size: 1.8em;
    color: #B0E3FF;
    margin: 0;
    font-weight: 700;
    text-align: right;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* --- WYŚWIETLANIE WYNIKÓW (Score & Darts Left) --- */
.score-display-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 30px;
}

.score-card, .darts-left-card {
  flex: 1;
  background-color: #1D2025;
  border-radius: 8px;
  padding: 25px 70px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.current-score-label, .darts-left-label {
  font-size: 1em;
  color: #b0b0b0;
  margin-top: 1px;
  margin-bottom: 5px;
  font-weight: 600;
}

.score-value {
    font-size: 3.5em;
    color: #FFCA1A;
    margin: 0;
    line-height: 1;
    font-weight: 700;
}

.darts-left-value {
    font-size: 3.5em;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    font-weight: 700;
}

/* --- KONTROLKI GRY (Poziome Przyciski HIT/MISS) --- */

.input-and-keypad-container.new-controls {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
}

/* Ukrycie elementów z oryginalnej gry 501 */
.input-and-keypad-container #score-input,
.input-and-keypad-container .number-keypad-block,
.input-and-keypad-container #undo-score-btn,
.input-and-keypad-container #register-score-btn {
    display: none !important;
}

.score-input-block.full-width-controls {
    width: 100%;
    flex: none;
    background-color: #16191E;
    padding: 0px 200px;
    border-radius: 8px;
}

/* Układ przycisków obok siebie */
.game-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
}

.large-control-btn {
    flex: 1;
    width: 100%;
    height: 80px;
    padding: 15px 10px;
    margin: 0;
    font-size: 1.1em;
    border-radius: 6px;
    opacity: 1;
    transition: background-color 0.2s, transform 0.1s;
    border: none;
    font-weight: bold;
}

/* Kolory przycisków Hit/Miss */
.green-btn {
    background-color: #125C1A;
    color: #fff;
}
.green-btn:hover {
    background-color: #15721E;
}

.red-btn {
    background-color: #6A0D0D;
    color: #fff;
}
.red-btn:hover {
    background-color: #7E1010;
}

/* --- BLOK INFORMACYJNY --- */
.info-block {
  background-color: #1D2025;
  padding: 15px 25px;
  border-radius: 8px;
  text-align: left;
  margin-top: 30px;
}
.info-block h4 {
    color: #B0E3FF;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
}
.info-block p {
    font-size: 0.9em;
    color: #ffffff;
}

/* --- UJEDNOLICONE STYLE ROUND FEEDBACK MODAL (POPRAWKA) --- */

.round-feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* PÓŁPRZEZROCZYSTE TŁO DLA EFEKTU ZACIEMNIENIA */
    background-color: rgba(0, 0, 0, 0.9);

    /* KLUCZOWA ZMIANA: Ukrywamy go, aby nie blokował przycisków, gdy jest niewyświetlany przez JS */
    display: none;

    align-items: center;
    justify-content: center;
    z-index: 1000;

    transition: opacity 0.3s ease;
    opacity: 0;
}

.round-feedback-modal.show {
    opacity: 1;
}

/* Styl tekstu na środku ekranu */
.round-feedback-modal h2 {
    font-size: 20px; /* Duża czcionka */
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff; /* Domyślny kolor tekstu */
    padding: 20px;
    max-width: 90%;
    line-height: 1.2;
    white-space: nowrap; /* Zapobiega łamaniu wierszy */
    text-overflow: ellipsis; /* Dodaje '...' na końcu, jeśli tekst jest ucięty */
    text-decoration: none !important; /* Usuwa podkreślenie (underline) */
    border-bottom: none !important;  /* Usuwa ewentualną linię na dole */
}

/* Kolory dla klas sukcesu/porażki */
.round-feedback-modal h2.feedback-green {
    color: #40CE18; /* Jasny zielony dla sukcesu */
}

.round-feedback-modal h2.feedback-yellow {
    color: #FFCA1A; /* Jasny żółty/pomarańczowy dla porażki/ostrzeżenia */
}


/* --- Media Queries for Mobile --- */
@media (max-width: 800px) {
    .score-display-container {
        flex-direction: column;
    }
    .input-and-keypad-container {
        flex-direction: column;
    }
    .score-input-block {
        margin-bottom: 20px;
    }

    /* Na telefonie przyciski 'Hit'/'Miss' wracają do pionowego układu */
    .game-controls {
        flex-direction: column;
    }

    .large-control-btn {
        flex: none;
        width: 100%;
    }

    /* Dopasowanie mniejszego rozmiaru czcionki dla modala na mobilnym */
    .round-feedback-modal h2 {
        font-size: 2.5em; /* Mniejsza czcionka na telefonie */
    }
}
