/* ==========================
   Global
========================== */

.heist-tapis {
    background: url('/tournois/heist-tournoi/assets/background.png') center center no-repeat;
    max-width: 900px;
    padding: 10px;
    border-radius: 25px;
    border: 2px solid black;
    -moz-border-radius: 10px;
    margin: 15px auto;
    box-shadow: 0 0 5px #0ff;
}

/* ==========================
   Bet Box
========================== */
.bet-box {
    text-align: center;
    margin-bottom: 20px;
}

.bet-box input {
    padding: 8px;
    border-radius: 5px;
    border: none;
    width: 100px;
    text-align: center;
}

.bet-box button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(45deg, gold, orange);
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

/* ==========================
   Heist Board
========================== */
.heist-board {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #00FF88;
    border-radius: 15px;
    background-color: #1b1b1b;
    box-shadow: 0 0 20px #00FF88 inset;
}

/* Timer */
#heist-timer {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 10px;
    color: #FFA500;
    text-shadow: 0 0 10px #FFA500;
}

/* Coffre */
#heist-safe-number {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 5px;
}

/* Code display */
#heist-code-display {
    font-size: 2em;
    letter-spacing: 15px;
    text-align: center;
    margin-bottom: 15px;
}

/* Feedback */
#heist-feedback {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 10px;
    color: #FFA500;
    text-shadow: 0 0 10px #FFA500;
}

/* Score / Coffres ouverts */
#heist-score {
    font-size: 1.2em;
    text-align: center;
    margin-top: 10px;
    color: #00FF88;
    font-weight: bold;
}

/* ==========================
   Keypad
========================== */
#heist-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 250px;
    margin: 0 auto;
}

#heist-keypad button {
    padding: 15px;
    font-size: 1.5em;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #00FF88;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
    transition: 0.2s;
}

#heist-keypad button:hover {
    background: #00FF88;
    color: #111;
    transform: scale(1.1);
    box-shadow: 0 0 15px #0ff, 0 0 25px #0ff;
}

/* ==========================
   Feedback overlay
========================== */
.mm-no, .mm-ok, #heist-result-error {
    max-width: 400px;
    margin: 15px auto;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    color: #fff;
}

.mm-no {
    background-color: #FF4444;
    box-shadow: 0 0 10px #FF4444;
}

.mm-ok {
    background-color: #00FF88;
    box-shadow: 0 0 10px #0f0;
}

#heist-result-error {
    background-color: #FFA500;
    box-shadow: 0 0 10px #FFA500;
}

/* ==========================
   Rounded buttons & neon
========================== */
button {
    border-radius: 12px;
    transition: 0.2s;
}

button:focus {
    outline: none;
}

.safe-selection {
	display:flex;
	justify-content:center;
	gap:40px;
	flex-wrap:wrap;
}

.safe-choice img {
	width:120px;
}

@media(max-width:850px){
.safe-selection {
	gap:20px;
}	
.safe-choice img {
	width:90px;
}
}

@media(max-width:600px){
.safe-choice img {
	width:80px;
}
}

@media(max-width:400px){
.safe-selection {
	gap:10px;
}	
.safe-choice img {
	width:55px;
}
}