/* Only component-specific rules; the DokuWiki theme supplies typography/colors. */
.demodb-emulator { max-width: 100%; margin: 1em auto; }
.demodb-emulator [hidden] { display: none !important; }
.demodb-emulator .demodb-emu-settings,
.demodb-emulator .demodb-player,
.demodb-emulator .loading-panel { box-sizing: border-box; padding: 20px; border: 1px solid #ddd; background: #fff; color: #333; }
.demodb-emulator .demodb-emu-settings { max-width: 760px; margin: 0 auto 1em; border-radius: 8px; box-shadow: 0 0 10px rgb(0 0 0 / .1); }
.demodb-emulator .demodb-status { padding: 10px; margin-bottom: 15px; background: #ffeb3b; text-align: center; font-weight: bold; }
.demodb-emulator .demodb-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.demodb-emulator label { display: grid; gap: 5px; flex: 1 1 180px; }
.demodb-emulator select, .demodb-emulator input, .demodb-emulator button { box-sizing: border-box; padding: 9px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.demodb-emulator .demodb-actions, .demodb-emulator .demodb-transport, .demodb-emulator .demodb-player-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.demodb-emulator button { cursor: pointer; background: #f5f5f5; color: #333; }
.demodb-emulator button:disabled { cursor: wait; opacity: .55; }
.demodb-emulator #start { background: #4caf50; border-color: #4caf50; color: #fff; }
.demodb-emulator .demodb-panic { background: #dc3545; border-color: #dc3545; color: #fff; }
.demodb-emulator .demodb-screen { position: relative; display: grid; place-items: center; width: 100%; min-height: 260px; overflow: hidden; background: #000; }
.demodb-emulator .demodb-screen.keyboard-captured { outline: 3px solid #4caf50; outline-offset: -3px; }
.demodb-emulator canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.demodb-emulator .demodb-screen:fullscreen { width: 100vw; height: 100vh; }
.demodb-emulator .demodb-screen:fullscreen canvas { width: 100%; height: 100%; }
.demodb-emulator #fullscreen-tip { position: absolute; top: 18px; left: 50%; translate: -50%; padding: 9px 13px; background: rgb(0 0 0 / .82); color: #fff; opacity: 0; pointer-events: none; }
.demodb-emulator .show-tip #fullscreen-tip { opacity: 1; }
.demodb-emulator .demodb-keyboard-status { box-sizing: border-box; margin: 0; padding: 8px 12px; background: #eee; color: #444; text-align: center; }
.demodb-emulator .demodb-keyboard-status.keyboard-captured { background: #e4f5e5; color: #185b1b; font-weight: bold; }
.demodb-emulator .demodb-player { margin-top: 1em; border-radius: 6px; }
.demodb-emulator .demodb-player-head { justify-content: space-between; margin-top: 0; }
.demodb-emulator progress { flex: 1 1 260px; width: 100%; accent-color: #4caf50; }
.demodb-emulator .loading-summary, .demodb-emulator .loading-file > div { display: flex; justify-content: space-between; gap: 10px; }
.demodb-emulator #loading-files { display: grid; gap: 8px; margin-top: 8px; }
.demodb-emulator .loading-file { display: grid; gap: 2px; }
.demodb-emulator .loading-file small, .demodb-emulator #midi-file-info { color: #666; }
.demodb-emulator .demodb-log { min-height: 1.4em; white-space: pre-wrap; color: #a33; }
@media (max-width: 600px) { .demodb-emulator .demodb-emu-settings, .demodb-emulator .demodb-player { padding: 12px; } }