/* Page émulateur autonome — reprend le visuel du cadre moniteur CPC. */
.lcpc-emulateur { display: flex; flex-direction: column; align-items: center; }
.lcpc-emulateur .emulator-frame { display: flex; flex-direction: row; position: relative; }
/* Barre de tri par lettre, placée au-dessus de l'écran de l'émulateur. */
.lcpc-emulateur .lcpc-emu-letters--top { justify-content: center; width: 100%; max-width: 1248px; margin: 0 auto 12px; padding: 0 10px; box-sizing: border-box; }
.lcpc-emulateur .lcpc-emu-letters--top .lcpc-emu-letter { padding: 4px 9px; font-size: 13px; }

.lcpc-emulateur .left-frame { display: flex; flex-direction: column; width: 898px; height: 714px; padding: 10px; position: relative; }
.lcpc-emulateur .cpc-bezel { position: absolute; width: 868px; height: 694px; background: url(emu-img/cpc_bezel.png) no-repeat; user-select: none; pointer-events: none; z-index: 2; }
.lcpc-emulateur .cpc-screenshot { position: absolute; display: none; top: 86px; left: 113px; width: 672px; height: 476px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; z-index: 1; }
.lcpc-emulateur .cpc-power { position: absolute; left: 803px; top: 630px; width: 60px; height: 60px; cursor: pointer; z-index: 3; }
.lcpc-emulateur .left-frame iframe { position: relative; top: 76px; margin-left: auto; margin-right: auto; width: 672px; height: 476px; border: 0; background: #000; }

.lcpc-emulateur .right-frame { display: flex; flex-direction: column; width: 350px; padding: 10px; padding-top: 20px; }
.lcpc-emulateur .lcpc-emu-filter { width: 100%; height: 40px; margin-bottom: 6px; background: #282828; color: #fff; border: 1px solid #bbb; padding: 0 8px; box-sizing: border-box; }
.lcpc-emulateur .lcpc-emu-letters { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.lcpc-emulateur .lcpc-emu-letter { background: #282828; color: #ddd; border: 1px solid #555; border-radius: 3px; padding: 2px 6px; cursor: pointer; font-size: 12px; line-height: 1.4; }
.lcpc-emulateur .lcpc-emu-letter:hover { background: #444; }
.lcpc-emulateur .lcpc-emu-letter.is-on { background: #c00; border-color: #c00; color: #fff; }

.lcpc-emulateur .lcpc-emu-list { display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: 5px; list-style: none; border: 1px solid #999; max-height: 560px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #282828 #181818; }
.lcpc-emulateur .lcpc-emu-list li { display: flex; align-items: center; padding: 5px; border-bottom: 1px solid #999; user-select: none; cursor: pointer; color: #ddd; }
.lcpc-emulateur .lcpc-emu-list li:last-child { border-bottom: 0; }
.lcpc-emulateur .lcpc-emu-list li:hover { color: #222; background: #999; }
.lcpc-emulateur .lcpc-emu-list li.is-sel { background: #c00; color: #fff; }
.lcpc-emulateur .lcpc-emu-list .icon { width: 32px; height: 32px; margin-right: 6px; background-size: 32px 32px; background-repeat: no-repeat; background-position: center; flex: 0 0 auto; }
.lcpc-emulateur .lcpc-emu-list .icon.dsk { background-image: url(emu-img/dsk_64x64.png); }
.lcpc-emulateur .lcpc-emu-count { color: #aaa; font-size: 12px; margin: 6px 0 0; }

/* Responsive : on empile et on réduit le cadre sur petit écran. */
@media (max-width: 1270px) {
    .lcpc-emulateur .emulator-frame { flex-direction: column; align-items: center; }
    .lcpc-emulateur .right-frame { width: min(898px, 94vw); }
}
@media (max-width: 940px) {
    .lcpc-emulateur .left-frame { transform: scale(.70); transform-origin: top center; height: 505px; }
}
@media (max-width: 680px) {
    .lcpc-emulateur .left-frame { transform: scale(.52); height: 380px; }
}