/**
 * Visor 16:9 del hero: aísla el CSS del juego real dentro del iframe.
 */
html.hero-game-frame,
html.hero-game-frame body {
    margin: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    background: #fff;
}

html.hero-game-frame .game-view {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

html.hero-game-frame .board {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: grid;
    gap: 0.8%;
    padding: 1.5%;
}

html.hero-game-frame .game-info {
    text-align: center;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vw, 16px);
}

html.hero-game-frame .hero-image-view {
    display: none;
    width: 100%;
    height: 100%;
}

html.hero-game-frame.is-image .game-view {
    display: none;
}

html.hero-game-frame.is-image .hero-image-view {
    display: block;
}

html.hero-game-frame .image-bingo-shell {
    width: 100%;
    height: 100%;
}

html.hero-game-frame .image-bingo-shell.prestart {
    opacity: 1;
    pointer-events: none;
}

html.hero-game-frame .demo-buttons,
html.hero-game-frame .image-bingo-actions,
html.hero-game-frame .image-bingo-toggle-row {
    pointer-events: none;
}

html.hero-game-frame .image-bingo-cell {
    pointer-events: none;
}