/* Emulacja: style panelu z index.html fm1-base (MPL-2.0, Charles Vestal), zawężone do .emu i przepięte na kolory strony */
.emu { max-width: calc(1040px + 2 * var(--gutter)); padding-top: clamp(32px, 6vh, 64px); }
.emu > p { color: var(--dim); max-width: var(--text); }
.emu .fw { font-family: var(--mono); color: var(--ink); }
.emu .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.emu :focus-visible { outline: 3px solid #ffc27a; outline-offset: 2px; }

/* przy szerokości telefonu panel trzyma kontrolki >= 24 px: ma minimalną szerokość i przewija się w swoim pudełku */
.emu .devicebox { margin: 28px 0 0; overflow-x: auto; overscroll-behavior-x: contain; }
.emu .device { position: relative; width: 100%; min-width: 560px; aspect-ratio: 1000 / 640; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.emu .device svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.emu .device svg text { font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif; }
.emu .device canvas { position: absolute; left: 31.8%; top: 9.6875%; width: 20%; height: 31.25%; background: #000; border-radius: 2px; }
.emu .hit { position: absolute; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 12px; }
.emu .hit.knob { cursor: ns-resize; border-radius: 50%; }
.emu .hit:focus-visible { outline: 3px solid #ffb48a; outline-offset: 2px; box-shadow: 0 0 0 6px #1b1d20; }
.emu .knob.picked > circle:first-child { stroke: var(--paint); stroke-width: 4; }
.emu .btnface, .emu .keyface { transition: fill .06s; }
.emu .lit .btnface { fill: var(--paint); }
.emu .lit text.btn { fill: #140D05; }
.emu .held .btnface, .emu .held .keyface { stroke: var(--paint); stroke-width: 3; }
.emu .latched .btnface, .emu .latched .keyface { stroke: #6fc3ff; stroke-width: 3; }
.emu .lit .keyface.white { fill: #ffc98a; }
.emu .lit .keyface.black { fill: var(--paint); }
.emu .start { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 11, 13, .55); border-radius: 4.4% / 6.9%; }
.emu .start[hidden] { display: none; }
.emu .start .cta:disabled { cursor: progress; }
.emu .turn { display: none; margin: 16px 0 0; color: var(--dim); font-size: 15px; }
@media (orientation: portrait) and (max-width: 700px) { .emu .turn { display: block; } }

.emu .bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 16px 0 0; color: var(--dim); font: 400 13px / 1.5 var(--mono); }
.emu .bar button { font: 500 12px / 1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--raised);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; min-height: 34px; cursor: pointer; }
.emu .bar button:hover { border-color: var(--paint); color: var(--paint); }
.emu .bar button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.emu .bar button[hidden], .emu .bar [hidden] { display: none; }
.emu .bar select { height: 34px; padding: 0 8px; border: 1px solid var(--line-2); background: var(--ground); color: var(--ink); font: inherit; max-width: 220px; }
.emu .bar label { display: inline-flex; gap: 8px; align-items: center; }
.emu .bar input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--paint); }
.emu .bar .cpu { order: 9; flex-basis: 100%; font-variant-numeric: tabular-nums; color: var(--faint); }
.emu #status { color: var(--ink); }
.emu #alert { color: #ff6b5e; flex-basis: 100%; }
.emu #alert:empty { display: none; }

.emu .help { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 20px 40px; margin: 40px 0 0; }
.emu .help h2 { display: block; transform: none; text-shadow: none; margin: 0 0 8px; font: 600 19px / 1.3 var(--sans); letter-spacing: 0; }
.emu .help p, .emu .help ul { margin: 0; color: var(--dim); font-size: 16px; }
.emu .help ul { padding-left: 1.1rem; }
.emu .help li + li { margin-top: 4px; }
.emu kbd { font: 500 .82em var(--mono); background: var(--raised); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 .35em; color: var(--ink); }

.emu .speak { margin: 32px 0 0; padding: 16px 20px; background: var(--raised); border: 1px solid var(--line); }
.emu .speak summary { cursor: pointer; }
.emu .speak summary h2 { display: inline; transform: none; text-shadow: none; font: 600 17px var(--sans); letter-spacing: 0; }
.emu .speak[open] summary { margin: 0 0 10px; }
.emu .speak fieldset { border: 0; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.emu .speak legend { padding: 0; margin: 0 0 6px; color: var(--dim); }
.emu .speak label { display: inline-flex; gap: 8px; align-items: center; }
.emu .speak input { width: 16px; height: 16px; accent-color: var(--paint); }
.emu .speak .row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 0; }
.emu .speak button { font: 500 12px / 1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--ground);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; min-height: 34px; cursor: pointer; }
.emu .speak button:disabled { opacity: .5; cursor: default; }
.emu #said { font-size: 19px; margin: 4px 0 0; min-height: 1.6em; overflow-wrap: anywhere; }
.emu #said:empty::before { content: "Nothing yet."; color: var(--dim); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .emu .btnface, .emu .keyface { transition: none; } }
/* telefon: panel szerszy niż ekran przewija się na boki, przycisk włączania przy lewej krawędzi (widać go bez przewijania) */
@media (max-width: 600px) { .emu .start { justify-items: start; padding-left: 6%; } }
/* SOLO / MULTI: wyraźnie nad panelem (decyzja użytkownika 2026-11-04) */
.emu p.mode { margin: 24px 0 0; padding: 14px 18px; max-width: none; border-left: 3px solid var(--paint); background: rgba(255, 154, 31, .08); color: var(--ink); font-size: 17px; }
.emu p.mode b { color: var(--paint); font-weight: 600; letter-spacing: .02em; }