* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body { background-color: #111; color: white; font-family: sans-serif; overflow: hidden; }

/* Selector de ROM */
#rom-loader {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #1a1a1a; overflow-y: auto; z-index: 1000;
    padding: 30px 20px; text-align: center;
}
.loader-inner { max-width: 720px; margin: 0 auto; }

#rom-loader select, #rom-loader input, #rom-loader button {
    padding: 10px; font-size: 16px; border-radius: 5px; border: none; outline: none;
    font-family: inherit;
}

/* Botón principal: arriba del todo, grande y simple (<button> normal de
   HTML), para que sea lo primero que se ve y se puede pulsar, y para que
   funcione igual en navegadores y TVs antiguos. */
#play-button {
    display: block; width: 100%; max-width: 320px; margin: 18px auto 10px;
    background: #007bff; color: white; cursor: pointer; font-weight: bold;
    font-size: 20px; padding: 16px 10px; border-radius: 8px;
}
#play-button:hover, #play-button:focus { background: #0091ff; }

.list-hint { font-size: 12px; color: #999; line-height: 1.4; margin-bottom: 20px; }

.loader-row {
    display: flex; flex-direction: row; justify-content: center; align-items: flex-start;
    gap: 40px; text-align: left;
}
.loader-col { display: flex; flex-direction: column; gap: 12px; width: 300px; max-width: 100%; }
.loader-col label { font-size: 13px; color: #bbb; font-weight: bold; }

/* Botones Anterior/Siguiente: alternativa al <select> por si éste no se
   ve o no se abre bien en el navegador de la TV. Son <button> normales,
   igual que #play-button, así que funcionan igual de bien con el mando a
   distancia (foco + OK/Enter) en cualquier navegador antiguo. */
.game-nav {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    width: 100%; margin-bottom: 4px;
}
.game-nav-btn {
    flex: 0 0 auto; background: #333; color: #fff; cursor: pointer;
    font-weight: bold; font-size: 14px; padding: 10px 8px; border-radius: 6px;
    white-space: nowrap;
}
.game-nav-btn:hover, .game-nav-btn:focus { background: #007bff; }
.game-nav-current {
    flex: 1 1 auto; text-align: center; font-size: 13px; color: #fff;
    padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lista de juegos: un <select> nativo, igual que el selector de sistema.
   Es el control más simple y compatible que existe en HTML: funciona igual
   en cualquier navegador, móvil o Smart TV, con o sin mando a distancia. */
#game-select { width: 100%; background: #151515; color: #fff; border: 2px solid #333; }
#core-selector { width: 100%; background: #151515; color: #fff; border: 2px solid #333; }
#rom-file { width: 100%; background: #151515; color: #ccc; }

@media (max-width: 700px) {
    .loader-row { flex-direction: column; align-items: center; gap: 24px; }
    .loader-col { width: 100%; max-width: 340px; }
}

#game-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; }

/* Canvas propio (NES via jsnes / GameBoy via GameBoy-Online), sin iframe.
   image-rendering "pixelated"/"crisp-edges" evita que el navegador difumine
   el escalado (look retro nítido); se listan varias variantes porque los
   navegadores de TV antiguos no siempre entienden la más nueva, pero al ser
   propiedades desconocidas simplemente se ignoran sin romper nada. */
#game-canvas {
    display: block;
    background: #000;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#system-badge {
    position: absolute; top: 16px; left: 16px;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: bold;
    letter-spacing: 1px; padding: 6px 12px; border-radius: 4px;
    pointer-events: none;
}
#system-badge:empty { display: none; }

/* Botón "Invertir colores": solución rápida por si algún navegador de TV
   viejo dibuja los colores del juego al revés. Se aplica sobre el propio
   <canvas> con un filtro CSS, así que cubre NES y GameBoy por igual sin
   tener que tocar cada motor por separado. Se listan las dos formas
   (con y sin prefijo -webkit-) porque Chrome 38 solo entiende la
   prefijada; en un navegador moderno la prefijada se ignora y se usa la
   normal, así que no hace falta bifurcar nada. */
#invert-toggle-btn {
    position: absolute; top: 16px; right: 16px; pointer-events: auto;
    background: rgba(0,0,0,0.6); color: #fff; border: 2px solid #444;
    font-size: 12px; font-weight: bold; padding: 8px 12px; border-radius: 6px;
    cursor: pointer; font-family: inherit;
}
#invert-toggle-btn:hover, #invert-toggle-btn:focus { background: #007bff; border-color: #007bff; }
#invert-toggle-btn.active { background: #ffc107; color: #000; border-color: #ffc107; }

#game-canvas.inverted {
    -webkit-filter: invert(1);
    filter: invert(1);
}

/* Aviso breve de guardar/cargar partida, en vez de alert() (que en algunos
   navegadores de TV puede quedar sin foco alcanzable por el mando). */
#toast {
    /* Centrado sin transform/calc (poco fiables en webOS 3.x, igual que
       .joystick-knob más abajo en este archivo): ancho fijo + left:50% +
       margin-left negativo de la mitad del ancho. */
    position: absolute; top: 40px; left: 50%; width: 320px; margin-left: -160px;
    background: rgba(20,20,20,0.95); color: #fff; border: 2px solid #444;
    padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: bold;
    opacity: 0; visibility: hidden; transition: opacity 0.2s;
    pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center;
}
#toast.visible { opacity: 1; visibility: visible; }

#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#qr-panel { position: absolute; bottom: 30px; right: 30px; background: rgba(20,20,20,0.9); padding: 20px; border-radius: 10px; border: 2px solid #444; text-align: center; pointer-events: auto; }
#qr-panel h3 { margin-bottom: 10px; font-size: 16px; }
#room-id-display { margin-top: 10px; font-size: 12px; color: #aaa; }

/* Botón "Iniciar Juego" dentro del panel QR: se muestra en cuanto se
   carga un juego y sirve de respaldo para activar el audio si el
   navegador bloqueó el autoplay hasta un gesto explícito del usuario.
   Mismo estilo que #play-button pero más compacto para el panel lateral. */
#start-game-btn {
    display: none; /* se muestra desde app.js cuando startEmulator() se llama */
    margin-top: 12px; width: 100%;
    background: #28a745; color: white; cursor: pointer;
    font-weight: bold; font-size: 16px;
    padding: 12px 8px; border-radius: 6px; border: none; outline: none;
    font-family: inherit;
}
#start-game-btn:hover, #start-game-btn:focus { background: #34ce57; }
#qr-players { display: flex; gap: 15px; }
.qr-block { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qr-label { font-size: 12px; color: #ccc; }
#qrcode1, #qrcode2 { background: white; padding: 10px; display: inline-block; }

#settings-menu {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(20,20,20,0.95); border: 2px solid #555; border-radius: 10px;
    padding: 30px; width: 300px; pointer-events: auto; z-index: 9999;
}
#settings-menu.hidden { display: none; }
#settings-menu h2 { text-align: center; margin-bottom: 20px; border-bottom: 1px solid #444; padding-bottom: 10px; }
#settings-menu ul { list-style: none; }
.menu-item { padding: 15px; margin-bottom: 5px; background: #222; border-radius: 5px; text-align: center; transition: 0.2s; }
.menu-item.active { background: #007bff; font-weight: bold; }

/* === GAMEPAD CELULAR ACTUALIZADO === */
.gamepad-body { overflow: hidden; touch-action: none; display: flex; flex-direction: column; }
#status { text-align: center; background: #333; padding: 5px; font-weight: bold; font-size: 14px; }
#player-badge { text-align: center; background: #007bff; padding: 4px; font-weight: bold; font-size: 12px; }
#player-badge:empty { display: none; }
.gamepad-container { position: relative; flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }

.triggers { display: flex; justify-content: space-between; width: 100%; padding: 0 10px; }
.btn-trigger { width: 80px; height: 40px; background: #555; border: none; color: white; border-radius: 10px; font-weight: bold; }

/* padding-bottom desplaza el centrado vertical (align-items: center) un
   poco hacia arriba dentro del espacio disponible, para que la cruceta/
   joystick y los botones de acción queden mejor ubicados al girar el
   teléfono en horizontal. */
.pad-area { display: flex; justify-content: space-between; align-items: center; width: 100%; flex: 1; padding-bottom: 34px; }

.left-control { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.btn-toggle-stick {
    padding: 6px 14px; border-radius: 20px; border: none;
    background: #333; color: #ccc; font-size: 13px; font-weight: bold;
}
.btn-toggle-stick.active { background: #007bff; color: #fff; }

.dpad { position: relative; width: 150px; height: 150px; }
.dpad.hidden { display: none; }
.btn-dir { position: absolute; width: 50px; height: 50px; background: #444; border: none; color: white; font-size: 20px; border-radius: 5px; }
.btn-dir.up { top: 0; left: 50px; }
.btn-dir.down { bottom: 0; left: 50px; }
.btn-dir.left { top: 50px; left: 0; }
.btn-dir.right { top: 50px; right: 0; }

/* Joystick analogico: pensado para juegos (sobre todo PSX en 3D) que
   requieren el stick y no responden a la cruceta digital. */
.joystick { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.joystick.hidden { display: none; }
.joystick-base {
    position: relative; width: 130px; height: 130px; border-radius: 50%;
    background: #262626; border: 3px solid #444;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
    touch-action: none;
}
.joystick-knob {
    /* Centrado con top/left fijos en vez de transform:translate(-50%,-50%)
       + calc(), que no funciona en navegadores de TV antiguos (webOS 3.x).
       Base: 130px, knob: 56px → (130-56)/2 = 37px para centrar. */
    position: absolute; top: 37px; left: 37px; width: 56px; height: 56px;
    border-radius: 50%; background: #555;
    border: 2px solid #888;
}
.joystick-knob.dragging { border-color: #007bff; }

.action-btns { position: relative; width: 150px; height: 150px; }
.btn-action { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: none; background: #555; color: white; font-size: 20px; font-weight: bold; }
.btn-action.triangle { top: 0; left: 50px; background: #28a745; }
.btn-action.cross { bottom: 0; left: 50px; background: #007bff; }
.btn-action.square { top: 50px; left: 0; background: #dc3545; }
.btn-action.circle { top: 50px; right: 0; background: #ffc107; color: black; }

/* center-btns ahora está en la parte superior del mando, entre los
   gatillos L1/R1 y el área de cruceta/botones de acción. Así los botones
   SELECT y START son siempre visibles tanto en vertical como al girar
   el teléfono en horizontal. */
.center-btns { display: flex; justify-content: center; gap: 20px; padding: 6px 0; }
.btn-menu { padding: 10px 20px; border-radius: 20px; border: none; background: #333; color: white; font-weight: bold; }

/* Los grupos que se pueden mover/redimensionar reciben transform (translate
   + scale) desde JS; el origen centrado hace que el redimensionado crezca
   parejo hacia todos lados en vez de desplazarse. */
.triggers, .center-btns, .left-control, .action-btns {
    transform-origin: center center;
}

/* Botón pequeño (arriba de SELECT/START) que activa el modo de edición
   del mando: mantenerlo pulsado restablece la disposición original. */
.edit-row { display: flex; justify-content: center; padding: 4px 0 2px; }
.btn-edit-layout {
    width: 30px; height: 30px; padding: 0; border-radius: 50%; border: none;
    background: #333; color: #ccc; font-size: 15px; line-height: 30px; text-align: center;
}
.btn-edit-layout.active { background: #007bff; color: #fff; }
.btn-edit-layout.reset-flash { background: #dc3545; color: #fff; }

/* Capa donde se dibujan los tiradores del modo de edición. Al estar
   posicionada (absolute) queda por encima de los botones del mando, así
   que mientras se edita no se disparan pulsaciones del juego. */
.edit-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; display: none; }
.edit-handle {
    position: absolute; box-sizing: border-box;
    border: 2px dashed #007bff; border-radius: 10px; background: rgba(0,123,255,0.15);
}
.edit-handle.active { border-color: #ffc107; background: rgba(255,193,7,0.2); }
.edit-handle-grip {
    position: absolute; right: -12px; bottom: -12px; width: 26px; height: 26px;
    border-radius: 50%; background: #ffc107; border: 2px solid #222;
}