@import url('../styles.css');

/* El cromo compartido (.popup, los botones, .info-side p, .buttons-panel) viene
   de la raíz. Aquí sólo lo que es propio de este juego. */

.info-side h1 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.info-side .hint { font-size: 0.95rem; color: #b7c6d6; margin-top: 1rem; line-height: 1.7; }
.score-panel {
    display: flex; gap: 1.2rem; font-size: 1.05rem; margin-bottom: 1rem;
    color: var(--text-muted); flex-wrap: wrap;
}
.buttons-panel { flex-wrap: wrap; align-items: center; margin-top: 1rem; }
#startBtn, #restartBtn {
    margin: 0;   /* la regla compartida da 0 0.5rem; aquí separa .buttons-panel */
}

body { background: var(--grad-bg); color: #fff; min-height: 100vh; margin: 0; }

.tiro-canvas {
    background: #0b1524;
    border: 3px solid var(--accent-color);
    border-radius: 16px;
    display: block;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    touch-action: manipulation;
}