/* Fondo de las bandas que quedan a los lados (o arriba y abajo) si la ventana no tiene la forma del juego */
html, body{
    background-color: rgb(8, 8, 18);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* El canvas va centrado; su tamaño lo pone ajustarTamaño() en Juego.js, manteniendo la proporción */
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    display: block;
}

/* Panel de reportes de bugs e ideas: HTML encima del canvas, con los colores del juego */
.reporte-fondo {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    z-index: 10;
}
.reporte-fondo.abierto {
    display: flex;
}
.reporte {
    box-sizing: border-box;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    background: rgb(28, 30, 48);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-family: sans-serif;
    font-size: 15px;
}
.reporte h2 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: normal;
}
.reporte-tipos {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.reporte-tipos label {
    flex: 1;
    padding: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}
.reporte-tipos label:has(input:checked) {
    border-color: yellow;
    background: rgba(60, 140, 255, 0.25);
    color: yellow;
}
.reporte-tipos input {
    accent-color: yellow;
}
.reporte-campo {
    display: block;
    margin-bottom: 14px;
    color: rgb(200, 200, 210);
}
.reporte-campo span {
    color: rgb(140, 140, 155);
}
.reporte-campo input,
.reporte-campo textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 6px;
    padding: 8px;
    background: rgb(16, 18, 30);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font: inherit;
    resize: vertical;
}
.reporte-campo input:focus,
.reporte-campo textarea:focus {
    outline: 2px solid rgb(120, 200, 255);
    outline-offset: -1px;
}
.reporte-info {
    margin: 0 0 8px;
    font-size: 13px;
    color: rgb(140, 140, 155);
}
.reporte-estado {
    min-height: 20px;
    margin: 0 0 12px;
    color: rgb(120, 220, 140);
}
.reporte-botones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.reporte-botones button {
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font: inherit;
    cursor: pointer;
}
.reporte-botones .reporte-enviar {
    border-color: yellow;
    color: yellow;
}
.reporte-botones button:disabled {
    opacity: 0.5;
    cursor: default;
}
/* --- Móvil: controles táctiles (ver Movil.js) ------------------------------------------------ */
body.movil {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.controles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}
.cruceta, .botones {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}
/* Cruceta: un círculo con las cuatro flechas; la que se pulsa se ilumina */
.cruceta {
    top: 66%;   /* más abajo que el centro: donde descansa el pulgar */
    left: calc(var(--margen-controles, 140px) / 2 - min(64px, calc(var(--margen-controles, 140px) * 0.45)));
    width: min(128px, calc(var(--margen-controles, 140px) * 0.9));
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(30, 20, 36, 0.85);
    border: 2px solid rgb(140, 98, 124);
    touch-action: none;
}
.flecha {
    position: absolute;
    width: 0;
    height: 0;
    border: 11px solid transparent;
}
.flecha.arriba { left: 50%; top: 10%; transform: translateX(-50%); border-bottom: 16px solid rgb(200, 180, 210); border-top: 0; }
.flecha.abajo { left: 50%; bottom: 10%; transform: translateX(-50%); border-top: 16px solid rgb(200, 180, 210); border-bottom: 0; }
.flecha.izquierda { top: 50%; left: 10%; transform: translateY(-50%); border-right: 16px solid rgb(200, 180, 210); border-left: 0; }
.flecha.derecha { top: 50%; right: 10%; transform: translateY(-50%); border-left: 16px solid rgb(200, 180, 210); border-right: 0; }
.cruceta[data-dir="ArrowUp"] .arriba { border-bottom-color: rgb(250, 200, 80); }
.cruceta[data-dir="ArrowDown"] .abajo { border-top-color: rgb(250, 200, 80); }
.cruceta[data-dir="ArrowLeft"] .izquierda { border-right-color: rgb(250, 200, 80); }
.cruceta[data-dir="ArrowRight"] .derecha { border-left-color: rgb(250, 200, 80); }
/* Botones: ✓ grande abajo, ✕ a su lado, y ☰ / ? pequeños arriba */
.botones {
    top: 60%;   /* un poco por debajo del centro, más cómodo para el pulgar */
    right: calc(var(--margen-controles, 140px) / 2 - min(64px, calc(var(--margen-controles, 140px) * 0.45)));
    width: min(128px, calc(var(--margen-controles, 140px) * 0.9));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center;
    align-items: center;
}
.boton {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgb(140, 98, 124);
    background: rgba(30, 20, 36, 0.85);
    color: rgb(220, 205, 230);
    font: 22px sans-serif;
    padding: 0;
    touch-action: none;
}
.boton-pequeño { width: 80%; font-size: 18px; }
.boton-a { grid-column: 1 / 3; width: 70%; border-color: rgb(250, 200, 80); color: rgb(250, 214, 110); font-size: 30px; }
.boton-b { grid-column: 1 / 3; width: 50%; order: -1; }
/* Pantalla completa: arriba a la izquierda, fuera del camino de los pulgares */
.boton-pantalla {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 44px;
    font-size: 20px;
    pointer-events: auto;
}
.boton.pulsado { background: rgba(250, 200, 80, 0.3); }
.boton.apagado { opacity: 0.35; }
/* En vertical: aviso para girar el móvil (el juego es apaisado) */
.girar-movil { display: none; }
@media (orientation: portrait) {
    body.movil .girar-movil {
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        position: fixed;
        inset: 0;
        z-index: 20;
        padding: 32px;
        text-align: center;
        overflow-wrap: break-word;
        background: rgb(20, 14, 29);
        color: rgb(250, 214, 110);
        font: 16px 'Press Start 2P', sans-serif;
        line-height: 1.6;
    }
    body.movil .controles { display: none; }
}

/* --- Mando: aviso al conectarlo o desconectarlo (ver Mando.js) ------------------------------- */
.aviso-mando {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 20px);
    padding: 10px 16px;
    background: rgba(22, 15, 28, 0.95);
    border: 2px solid rgb(140, 98, 124);
    color: rgb(250, 214, 110);
    font: 14px sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 15;
}
.aviso-mando.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}