/* ============================================================
   ARCADE FRAME — Version fidèle au CSS global Breakout
   ============================================================ */

/* Cadre arcade */
.tl-arcade-frame {
    background: #111;
    padding: 20px;
    border: 8px solid #444;
    border-radius: 20px;
    box-shadow: 0 0 40px #0ff inset, 0 0 20px #0ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
}

/* Marquee */
.tl-marquee {
    font-size: 22px;
    color: #0ff;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #0ff;
}

/* HUD */
.tl-hud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    text-align: center;
}

.tl-hud div {
    color: white;
    font-size: 16px;
}

/* Boutons arcade */
.tl-controls button {
    width: 70px;
    height: 70px;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    background: #333;
    color: white;
    box-shadow: 0 0 10px #0ff;
}
/* Centrage et espacement des boutons Breakout */
.tl-controls {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}