/* Amstrad CPC v15 — les règles prioritaires isolent le thème du moteur. */
:root {
  color-scheme: dark;
  --cp-bg: #101418;
  --cp-surface: #191f26;
  --cp-raised: #222b34;
  --cp-line: #34414c;
  --cp-text: #edf3f6;
  --cp-muted: #a5b2bf;
  --cp-accent: #80dfce;
  --cp-accent-bg: #203d39;
  --cpbar-h: 84px;
  --cp-fit-px: min(100vw, 960px);
  --cp-zoom: 1;
  --cp-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html { min-height: 100%; background: var(--cp-bg); }
body { margin: 0 !important; padding: 0 !important; min-width: 280px; min-height: 100svh; overflow-x: hidden !important; background: var(--cp-bg) !important; color: var(--cp-text); font-family: var(--cp-font) !important; -webkit-font-smoothing: antialiased; }
body::before { display: none !important; }
html.cp-modal-open, body.cp-modal-open { overflow: hidden !important; }
[id^="cp-"], [id^="cp-"] *, [id^="cp-"] *::before, [id^="cp-"] *::after { box-sizing: border-box; }
[id^="cp-"][hidden] { display: none !important; }
[id^="cp-"] button, [id^="cp-"] select, [id^="cp-"] input, [id^="cp-"] textarea { font-family: var(--cp-font); }
[id^="cp-"] button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[id^="cp-"] :focus-visible, .cpc464-keyboard :focus-visible { outline: 2px solid var(--cp-accent) !important; outline-offset: 3px; }
[id^="cp-"] button:disabled { opacity: .45; cursor: default; }

/* Navigation principale, libellés persistants. */
#cp-toolbar { position: relative; z-index: 50; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; width: 100%; padding: 18px 28px; background: #151a20; border-bottom: 1px solid #2a333d; color: var(--cp-text); }
.cp-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cp-brand-mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #48716c; border-radius: 11px; background: #1d3432; color: var(--cp-accent); font-size: 14px; font-weight: 800; letter-spacing: -.06em; }
.cp-brand-mark svg { width: 23px; height: 23px; }
.cp-brand strong, .cp-brand-name { display: block; font-size: 14px; font-weight: 750; letter-spacing: .09em; line-height: 1.3; }
.cp-brand-sub { display: block; margin-top: 3px; color: var(--cp-muted); font-size: 11px; letter-spacing: .02em; }
.cp-main-controls, .cp-extra-controls, .cp-disk-shortcuts { display: flex; align-items: center; gap: 7px; }
.cp-main-controls { flex-wrap: wrap; }
.cp-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 13px; border: 1px solid var(--cp-line); border-radius: 9px; background: #1d252e; color: var(--cp-text); font: 600 12px/1.3 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.cp-icon svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-icon:hover { border-color: #617482; background: #2a3540; }
.cp-icon[aria-pressed="true"], .cp-icon[aria-expanded="true"] { border-color: #65a99c; background: var(--cp-accent-bg); color: #b3f1e5; }
#cp-disks { background: var(--cp-accent); border-color: var(--cp-accent); color: #102b26; font-weight: 750; }
#cp-disks:hover { background: #9cebdc; border-color: #9cebdc; }
#cp-export { border-color: #4b6e67; color: #b1eadc; }
#cp-more { display: none; }

/* Session : écran central 4:3, net et dimensionné par le viewport mesuré. */
#cp-workspace-head, #cp-workspace-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 28px 16px; }
.cp-screen-caption { display: grid; gap: 5px; }
.cp-eyebrow { color: var(--cp-muted); font-size: 9px; font-weight: 650; letter-spacing: .15em; line-height: 1.4; }
.cp-screen-caption h1, .cp-screen-caption strong { margin: 0; color: var(--cp-text); font-family: var(--cp-font); font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.4; }
.cp-screen-caption p, .cp-screen-caption small { margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.4; }
.cp-session-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: #c9d5df; font-size: 11px; }
.cp-live-dot, .cp-status-dot, .cp-session-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--cp-accent); box-shadow: 0 0 0 4px #80dfce12; }
#cp-workspace-foot { padding-top: 16px; padding-bottom: 24px; color: var(--cp-muted); font-size: 11px; line-height: 1.5; }
#cp-workspace-foot p { margin: 0; }
#cp-workspace-foot kbd { display: inline-block; padding: 2px 5px; border: 1px solid var(--cp-line); border-radius: 4px; font: 10px var(--cp-font); color: #d8e3eb; }
#cp-layout-status, .cp-layout-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--cp-line); border-radius: 6px; white-space: nowrap; color: #cbd8df; font-size: 10px; }
html[data-theme="cpc464"] .workbench { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
html[data-theme="cpc464"] .receiver { display: block !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
html[data-theme="cpc464"] .screen-stage { display: block !important; position: relative !important; box-sizing: border-box !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 24px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; scrollbar-width: thin; scrollbar-color: #50616b #161c22; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
html[data-theme="cpc464"] .screen-frame { box-sizing: border-box !important; position: relative !important; width: calc(var(--cp-fit-px) * var(--cp-zoom)) !important; min-width: calc(var(--cp-fit-px) * var(--cp-zoom)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 5px !important; background: #000 !important; box-shadow: 0 0 0 1px #3b4652, 0 12px 40px #0004 !important; transform: none !important; transition: none !important; }
html[data-theme="cpc464"] .screen-glass { position: relative !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: #000 !important; box-shadow: none !important; overflow: hidden !important; }
html[data-theme="cpc464"] .screen-glass::after { display: none !important; }
html[data-theme="cpc464"] #screen { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; border: 0 !important; image-rendering: pixelated !important; filter: brightness(var(--cp-user-brightness, 1)); }
html[data-theme="cpc464"].cp-monochrome #screen { filter: brightness(var(--cp-user-brightness, 1)) grayscale(1) sepia(1) hue-rotate(69deg) saturate(4); }
html[data-theme="cpc464"] .scanline-overlay { display: block !important; opacity: var(--cp-scan-opacity, 0) !important; pointer-events: none !important; }
html.cp-mouse-game #screen { cursor: crosshair !important; touch-action: none !important; }

/* Les commandes moteur restent dans le DOM et sont pilotées par la surcouche. */
html[data-theme="cpc464"] .masthead, html[data-theme="cpc464"] .receiver-top,
html[data-theme="cpc464"] .control-deck, html[data-theme="cpc464"] .receiver-footer,
html[data-theme="cpc464"] .display-dial-bank, html[data-theme="cpc464"] .screen-brand,
html[data-theme="cpc464"] .screen-build-info, html[data-theme="cpc464"] .screen-badge,
html[data-theme="cpc464"] .screen-hint, html[data-theme="cpc464"] .drop-hint,
html[data-theme="cpc464"] .cpc-keyboard-bar, html[data-theme="cpc464"] .cpc464-tape-deck,
html[data-theme="cpc464"] .screen-stage::before, html[data-theme="cpc464"] .screen-stage::after,
#screenHint, .ml-monitor, .expansion-panel, .expansion-backdrop,
#mlMonitor, #mlMonitorPanel, #mlMonitorToggle { display: none !important; }
.expansion-panel, .expansion-backdrop { visibility: hidden !important; pointer-events: none !important; }

/* Fenêtres : hiérarchie commune, champs et boutons accessibles au toucher. */
#cp-dialog, #cp-settings-dialog, #cp-paste-dialog { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: #080b10c9; backdrop-filter: blur(5px); color: var(--cp-text); font: 14px/1.5 var(--cp-font); }
#cp-settings-dialog { z-index: 310; }
#cp-paste-dialog { z-index: 340; }
#cp-box, .cp-settings-panel, .cp-paste-panel { width: min(680px, 100%); max-height: calc(100svh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #43505c; border-radius: 16px; background: var(--cp-surface); box-shadow: 0 24px 90px #0009; }
.cp-dialoghead, .cp-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--cp-line); }
.cp-dialoghead h2, .cp-settings-head h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.cp-sub, .cp-settings-head p { margin: 4px 0 0; color: var(--cp-muted); font-size: 12px; }
.cp-close, #cp-paste-close, #cp-phone-close, #cp-keyboard-close, #cp-input-close { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--cp-line); border-radius: 9px; background: var(--cp-raised); color: var(--cp-text); font: 25px/1 var(--cp-font); cursor: pointer; }
.cp-close:hover, #cp-paste-close:hover, #cp-phone-close:hover, #cp-keyboard-close:hover, #cp-input-close:hover { border-color: #658079; background: #2a373e; }
#cp-disk-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 22px 0; }
#cp-disk-actions .cp-icon { flex: 1; }
.cp-findrow { display: flex; gap: 9px; padding: 16px 22px; }
#cp-search, .cp-setting-field select, .cp-pc-layout select, .cp-zoom-label select, #cp-model { min-height: 44px; min-width: 0; border: 1px solid #4b5b69; border-radius: 8px; background: #11171e; color: var(--cp-text); padding: 10px 12px; font: 14px var(--cp-font); }
html[data-theme="cpc464"] [id^="cp-"] select { min-height: 44px; border: 1px solid #4b5b69; border-radius: 8px; padding: 10px 12px; appearance: auto; background: #11171e; color: var(--cp-text); box-shadow: none; font: 500 14px var(--cp-font); text-transform: none; }
html[data-theme="cpc464"] [id^="cp-"] select option { background: #11171e; color: var(--cp-text); }
#cp-search { width: 100%; flex: 1; font-size: 16px; }
#cp-search::placeholder { color: #97a7b6; }
.cp-refresh { min-width: 44px; min-height: 44px; border: 1px solid var(--cp-line); border-radius: 8px; background: var(--cp-raised); color: var(--cp-text); font-size: 21px; cursor: pointer; }
#cp-list { overflow-y: auto; min-height: 110px; padding: 0 22px 16px; scrollbar-width: thin; }
.cp-disk { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 9px; padding: 12px; border: 1px solid var(--cp-line); border-radius: 10px; background: #1d252d; }
.cp-dinfo { flex: 1; min-width: 0; }
.cp-dname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text); font-size: 14px; font-weight: 600; }
.cp-dpath { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-muted); font-size: 11px; }
.cp-dbuttons { display: flex; gap: 7px; flex-shrink: 0; }
.cp-dbuttons button, .cp-disk-download { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 9px 12px; border: 1px solid #518b7d; border-radius: 8px; background: #213d35; color: #c4f1e5; font: 650 13px var(--cp-font); text-decoration: none; cursor: pointer; }
.cp-dbuttons button:hover, .cp-disk-download:hover { background: #2b5045; }
.cp-dbuttons button.secondary { background: var(--cp-raised); border-color: #556574; }
#cp-status { padding: 11px 22px; border-top: 1px solid var(--cp-line); color: #c1cfd8; font-size: 12px; }
.cp-instructions { padding: 13px 22px 18px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); font-size: 11px; line-height: 1.6; }
.cp-instructions strong { color: #d7e4eb; font-weight: 600; }

.cp-settings-panel { width: min(620px, 100%); }
.cp-settings-scroll { display: grid; gap: 24px; min-height: 0; overflow-y: auto; padding: 22px; scrollbar-width: thin; }
.cp-settings-section { display: grid; gap: 15px; margin: 0; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--cp-line); }
.cp-settings-section:last-of-type { padding-bottom: 0; border-bottom: 0; }
.cp-settings-section h3 { margin: 0; color: #dce8ec; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cp-setting-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.cp-setting-tools > .cp-icon { flex: 1; }
.cp-setting-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; color: #d6e0e6; font-size: 13px; font-weight: 550; }
.cp-setting-field select { grid-column: 1 / -1; width: 100%; }
.cp-setting-field input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 32px; margin: 0; accent-color: var(--cp-accent); cursor: pointer; }
.cp-setting-field output { color: #a6e8d9; font-size: 12px; font-variant-numeric: tabular-nums; }
.cp-pc-layout, .cp-zoom-label { display: grid; gap: 8px; flex: 1; min-width: 140px; color: #d6e0e6; font-size: 13px; font-weight: 550; }
.cp-pc-layout select, .cp-zoom-label select { width: 100%; }
.cp-setting-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #d6e0e6; font-size: 13px; }
.cp-setting-switch input, .cp-paste-actions input { width: 19px; height: 19px; margin: 0; accent-color: var(--cp-accent); }
.cp-input-help { margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.6; }
.cp-settings-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.cp-settings-actions button, .cp-paste-actions button, .cp-phone-keys button, .cp-phone-options button, #cp-reset { min-height: 44px; border: 1px solid #4f615f; border-radius: 8px; padding: 10px 13px; background: #223c35; color: #d6f3e9; font: 600 12px/1.4 var(--cp-font); text-align: center; text-decoration: none; cursor: pointer; }
.cp-settings-actions button + button, .cp-phone-options button, .cp-phone-keys button, #cp-reset { background: var(--cp-raised); border-color: #4b5a69; color: var(--cp-text); }
#cp-reset { color: #f4c4ba; border-color: #6b4c48; background: #342724; }

/* Menu de contrôles et saisie de programmes. */
#cp-input-menu { position: fixed; z-index: 320; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); max-height: calc(100svh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; color: var(--cp-text); font: 14px/1.45 var(--cp-font); }
.cp-input-inner { padding: 15px; background: var(--cp-surface); border: 1px solid #51616c; border-radius: 13px; box-shadow: 0 18px 60px #0008; }
.cp-input-inner header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 9px; }
.cp-input-inner header strong { font-size: 16px; font-weight: 650; }
.cp-input-inner > button { display: grid; gap: 5px; width: 100%; min-height: 65px; margin-top: 8px; padding: 12px; text-align: left; border: 1px solid var(--cp-line); border-radius: 9px; background: var(--cp-raised); color: var(--cp-text); font: 600 13px var(--cp-font); cursor: pointer; }
.cp-input-inner > button[aria-pressed="true"] { background: #223c35; border-color: #77b9a6; }
.cp-input-inner > button small { color: #b5c5cf; font-size: 11px; font-weight: 400; line-height: 1.5; }
.cp-paste-panel { width: min(740px, 100%); padding: 22px; overflow-y: auto; }
.cp-paste-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.cp-paste-panel header strong { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.cp-paste-panel header p { margin: 5px 0 0; color: var(--cp-muted); font-size: 12px; }
#cp-paste-text { display: block; width: 100%; min-height: 230px; max-height: 48svh; padding: 14px; resize: vertical; border: 1px solid #50616e; border-radius: 9px; background: #10161c; color: var(--cp-text); font: 15px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.cp-paste-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.cp-paste-actions button { background: var(--cp-raised); border-color: #51616b; color: var(--cp-text); }
.cp-paste-actions .cp-paste-send { background: var(--cp-accent); border-color: var(--cp-accent); color: #15332b; }
.cp-paste-actions label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #c4d0d9; font-size: 12px; }
.cp-paste-tip { margin: 15px 0 0; color: var(--cp-muted); font-size: 12px; line-height: 1.6; }

/* Clavier virtuel : les touches et scancodes du moteur sont conservés. */
html[data-theme="cpc464"] .cpc464-keyboard { display: none !important; }
html[data-theme="cpc464"] .cpc464-keyboard[data-keyboard-open="true"] { display: block !important; position: fixed !important; z-index: 420 !important; inset: auto 0 0 !important; width: 100% !important; max-width: 1100px !important; height: auto !important; max-height: min(70svh, 520px) !important; margin: 0 auto !important; padding: 16px 18px max(18px, env(safe-area-inset-bottom)) !important; overflow-y: auto !important; border: 1px solid #50616b !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important; background: var(--cp-surface) !important; box-shadow: 0 -16px 60px #0007 !important; }
#cp-keyboard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; color: var(--cp-text); font: 600 16px var(--cp-font); }
#cp-keyboard-shade { position: fixed; inset: 0; z-index: 400; background: #080b10bd; backdrop-filter: blur(3px); }
html[data-theme="cpc464"] .cpc464-keybed:not([hidden]) { display: grid !important; width: 100% !important; max-height: none !important; overflow-x: auto !important; padding: 5px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme="cpc464"] .cpc464-keybed[hidden], html[data-theme="cpc464"] .cpc464-keyboard[hidden] { display: none !important; }
html[data-theme="cpc464"] .cpc-key-row { min-width: 620px !important; }
html[data-theme="cpc464"] .cpc-key { min-width: 0 !important; min-height: 44px !important; border-radius: 6px !important; font-family: var(--cp-font) !important; font-size: clamp(10px, 1.35vw, 13px) !important; }

/* Saisie téléphone, positionnement compatible avec visualViewport. */
#cp-phone-panel { position: fixed; z-index: 600; bottom: 0; left: 0; right: 0; max-height: 52svh; overflow-y: auto; padding: 16px max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom)); background: var(--cp-surface); border-top: 1px solid #596d77; box-shadow: 0 -14px 45px #0007; color: var(--cp-text); font: 14px var(--cp-font); }
.cp-phone-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-phone-head strong { font-size: 15px; font-weight: 650; }
.cp-phone-prompt { display: block; margin-bottom: 8px; color: #c7d6df; font-size: 12px; }
#cp-phone-text { display: block; width: 100%; height: 78px; min-height: 62px; max-height: 120px; padding: 12px; resize: vertical; border: 1px solid #5b6e7d; border-radius: 8px; background: #10171d; color: var(--cp-text); font: 16px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; user-select: text; -webkit-user-select: text; touch-action: manipulation; caret-color: var(--cp-accent); }
#cp-phone-status { min-height: 21px; margin: 8px 0; color: #a2e9ce; font-size: 12px; line-height: 1.5; }
#cp-phone-status.cp-phone-error { color: #ffc7a8; }
.cp-phone-options { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.cp-phone-options label { display: flex; align-items: center; gap: 7px; min-height: 44px; margin-right: auto; color: #dce5ec; font-size: 12px; }
.cp-phone-options input { width: 19px; height: 19px; accent-color: var(--cp-accent); }
.cp-phone-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-phone-keys button { flex: 1; }
.cp-phone-tip { margin: 10px 0 0; color: var(--cp-muted); font-size: 11px; line-height: 1.5; }

/* Notifications, progression et commande tactile. */
html[data-theme="cpc464"] #toast { right: max(20px, env(safe-area-inset-right)); bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px)); max-width: min(380px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #5f8076; border-radius: 11px; background: #1c302a; color: #e3f3ec; box-shadow: 0 10px 32px #0006; font: 500 13px/1.5 var(--cp-font); letter-spacing: normal; text-transform: none; }
#cp-toast { position: fixed; z-index: 700; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: min(90vw, 540px); padding: 13px 17px; border: 1px solid #5f9c8d; border-radius: 11px; background: #203d35; color: #e3f8ef; font: 500 13px/1.5 var(--cp-font); box-shadow: 0 12px 40px #0006; }
#cp-typing-bar { position: fixed; z-index: 330; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: min(580px, calc(100vw - 24px)); padding: 14px 16px; border: 1px solid #5c8c82; border-radius: 11px; background: #1d342f; color: #e1f5eb; font: 600 12px var(--cp-font); box-shadow: 0 10px 34px #0006; }
#cp-typing-bar progress { flex: 1; min-width: 90px; height: 13px; accent-color: var(--cp-accent); }
#cp-typing-cancel { min-height: 44px; padding: 9px 12px; border: 1px solid #95635e; border-radius: 7px; background: #512f2c; color: #ffe1d9; font: 600 12px var(--cp-font); cursor: pointer; }
/* Le joystick reste hors du canvas en portrait, avec un bouton TIR séparé. */
#cp-touch-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 680px; margin: 0 auto; padding: 6px 28px max(22px, env(safe-area-inset-bottom)); color: var(--cp-text); font-family: var(--cp-font); }
.cp-stick-cluster, .cp-fire-cluster { display: grid; justify-items: center; gap: 10px; }
.cp-stick-cluster { width: 144px; flex: 0 0 auto; }
.cp-fire-cluster { width: 116px; flex: 0 0 auto; padding-top: 18px; }
.cp-touch-label { color: #a9c1ba; font-size: 9px; font-weight: 650; letter-spacing: .15em; }
.cp-touch-help { margin: 0; color: var(--cp-muted); font-size: 10px; line-height: 1.4; white-space: nowrap; }
#cp-joystick-pad { --cp-stick-x: 0px; --cp-stick-y: 0px; position: relative; width: 144px; height: 144px; overflow: hidden; border: 1px solid #496760; border-radius: 50%; background: #1a2b28; box-shadow: inset 0 0 0 12px #203630, inset 0 0 0 13px #405b53, 0 5px 22px #0003; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#cp-joystick-pad.cp-active { border-color: var(--cp-accent); cursor: grabbing; }
.cp-pad-arrow { position: absolute; width: 0; height: 0; border: 4px solid transparent; font-size: 0; pointer-events: none; }
.cp-pad-up { top: 8px; left: 50%; border-top-width: 0; border-bottom-color: #8faea2; transform: translateX(-50%); }
.cp-pad-down { bottom: 8px; left: 50%; border-bottom-width: 0; border-top-color: #8faea2; transform: translateX(-50%); }
.cp-pad-left { left: 8px; top: 50%; border-left-width: 0; border-right-color: #8faea2; transform: translateY(-50%); }
.cp-pad-right { right: 8px; top: 50%; border-right-width: 0; border-left-color: #8faea2; transform: translateY(-50%); }
#cp-joystick-thumb { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border: 1px solid #87baab; border-radius: 50%; background: #548a78; box-shadow: 0 4px 0 #1b3830, 0 6px 16px #0005; transform: translate(calc(-50% + var(--cp-stick-x, 0px)), calc(-50% + var(--cp-stick-y, 0px))); pointer-events: none; }
#cp-joystick-pad.cp-active #cp-joystick-thumb { border-color: #c5f7e7; background: var(--cp-accent); }
#cp-fire-button { position: static; width: 84px; height: 84px; margin: 0; border: 2px solid #80cdb8; border-radius: 50%; background: #2f5b4e; color: #eafff5; box-shadow: 0 5px 0 #142c25, 0 8px 24px #0005; font: 750 14px var(--cp-font); letter-spacing: .06em; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
#cp-fire-button:active, #cp-fire-button[aria-pressed="true"] { background: var(--cp-accent); color: #143b2e; transform: translateY(3px); box-shadow: 0 2px 0 #142c25, 0 4px 15px #0004; }

/* Plein écran racine : la barre et tous les panneaux restent disponibles. */
html:fullscreen { background: var(--cp-bg); overflow-y: auto; }
html:fullscreen body { min-height: 100vh; }
html:fullscreen #cp-toolbar { padding-top: 10px; padding-bottom: 10px; }
html:fullscreen #cp-workspace-head { padding-top: 12px; padding-bottom: 12px; }
html:fullscreen #cp-workspace-foot { padding-top: 10px; padding-bottom: 10px; }

@media (min-width: 701px) and (max-width: 1050px) {
  #cp-toolbar { justify-content: center; gap: 14px; padding: 16px 24px; }
  .cp-brand { width: 100%; justify-content: center; }
  .cp-main-controls { justify-content: center; }
  .cp-main-controls .cp-icon { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  #cp-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 15px 12px 12px; }
  .cp-brand { gap: 9px; }
  .cp-brand-mark { flex-basis: 33px; width: 33px; height: 33px; border-radius: 9px; font-size: 12px; }
  .cp-brand strong, .cp-brand-name { font-size: 12px; letter-spacing: .08em; }
  .cp-brand-sub { margin-top: 2px; font-size: 10px; }
  .cp-main-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .cp-disk-shortcuts { grid-column: 1 / -1; order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 6px; }
  #cp-toolbar #cp-reset { flex-direction: column; gap: 2px; min-width: 56px; padding: 5px 4px; }
  #cp-toolbar .cp-icon { gap: 5px; min-width: 0; min-height: 46px; padding: 9px 4px; font-size: 11px; }
  #cp-toolbar .cp-icon svg { width: 16px; height: 16px; }
  #cp-toolbar .cp-disk-shortcuts .cp-icon { white-space: normal; line-height: 1.4; }
  #cp-more { display: inline-flex; }
  .cp-extra-controls { display: none; position: absolute; top: calc(100% + 8px); right: 12px; z-index: 55; width: min(260px, calc(100vw - 24px)); padding: 8px; border: 1px solid #53636d; border-radius: 12px; background: var(--cp-surface); box-shadow: 0 16px 50px #0008; }
  #cp-toolbar.cp-more-open .cp-extra-controls { display: grid; gap: 5px; }
  #cp-toolbar .cp-extra-controls .cp-icon { justify-content: flex-start; gap: 10px; width: 100%; padding: 11px 12px; font-size: 13px; }
  #cp-workspace-head { padding: 20px 14px 14px; align-items: center; gap: 8px; }
  .cp-screen-caption h1, .cp-screen-caption strong { font-size: 15px; }
  .cp-eyebrow { font-size: 8px; }
  .cp-screen-caption p, .cp-screen-caption small { font-size: 11px; }
  .cp-session-meta { font-size: 10px; }
  html[data-theme="cpc464"] .screen-stage { padding: 0 10px !important; }
  #cp-workspace-foot { padding: 14px 14px 20px; align-items: flex-start; font-size: 10px; }
  #cp-workspace-foot > :first-child { max-width: 75%; }
  #cp-layout-status, .cp-layout-badge { padding: 4px 6px; font-size: 9px; }
  #cp-dialog, #cp-settings-dialog, #cp-paste-dialog { padding: 10px; }
  #cp-box, .cp-settings-panel, .cp-paste-panel { max-height: calc(100svh - 20px); max-height: calc(100dvh - 20px); border-radius: 13px; }
  .cp-dialoghead, .cp-settings-head { padding: 15px; gap: 10px; }
  .cp-dialoghead h2, .cp-settings-head h2 { font-size: 18px; }
  #cp-disk-actions { padding: 14px 15px 0; }
  #cp-disk-actions .cp-icon { padding: 10px 8px; font-size: 12px; }
  .cp-findrow { padding: 14px 15px; }
  #cp-list { padding: 0 15px 14px; }
  .cp-disk { flex-direction: column; align-items: stretch; gap: 10px; }
  .cp-dbuttons { width: 100%; }
  .cp-dbuttons button { flex: 1; }
  #cp-status { padding: 10px 15px; }
  .cp-instructions { padding: 12px 15px 15px; font-size: 10px; }
  .cp-settings-scroll { padding: 18px 15px; gap: 20px; }
  .cp-settings-actions button { flex: 1; }
  html[data-theme="cpc464"] [id^="cp-"] select { font-size: 16px; }
  .cp-setting-tools { align-items: stretch; }
  .cp-setting-tools > .cp-icon { white-space: normal; }
  .cp-paste-panel { padding: 16px; }
  .cp-paste-panel header strong { font-size: 17px; }
  #cp-paste-text { min-height: 190px; font-size: 16px; }
  .cp-paste-actions { gap: 8px; }
  .cp-paste-actions button { flex: 1; }
  .cp-paste-actions label { width: 100%; order: 1; }
  .cp-paste-tip { font-size: 11px; }
  html[data-theme="cpc464"] .cpc464-keyboard[data-keyboard-open="true"] { padding: 12px 10px max(12px, env(safe-area-inset-bottom)) !important; }
  #cp-keyboard-head { font-size: 14px; }
  #cp-phone-panel { padding: 12px max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)); }
  .cp-phone-options { gap: 6px; }
  .cp-phone-options label { width: 100%; }
  .cp-phone-options button { flex: 1; }
  .cp-phone-keys { gap: 6px; }
  .cp-phone-keys button { padding: 9px 7px; font-size: 11px; }
}
/* Le clavier Amstrad entier tient à l'écran, y compris sur Android en portrait. */
@media (max-width: 700px), (pointer: coarse) {
  html[data-theme="cpc464"] .cpc464-keyboard[data-keyboard-open="true"] { width: calc(100% - 16px) !important; max-width: 680px !important; padding: 10px 6px max(12px, env(safe-area-inset-bottom)) !important; }
  #cp-keyboard-head { padding: 0 4px 9px; }
  html[data-theme="cpc464"] .cpc464-keybed:not([hidden]) { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 5px !important; padding: 3px 0 5px !important; overflow-x: hidden !important; }
  html[data-theme="cpc464"] .cpc-key-row { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 2px !important; }
  html[data-theme="cpc464"] .cpc-key-row-space { padding-inline: 0 !important; }
  html[data-theme="cpc464"] .cpc-key { box-sizing: border-box !important; flex-basis: 0 !important; min-width: 0 !important; min-height: 38px !important; padding: 3px 0 !important; border-width: 1px !important; border-radius: 4px !important; font: 700 clamp(8px, 2.1vw, 10px)/1.1 Arial, sans-serif !important; letter-spacing: -.025em !important; white-space: nowrap !important; }
  html[data-theme="cpc464"] .cpc-key[data-scancode="40"] { flex-grow: 2.1 !important; }
  html[data-theme="cpc464"] .cpc-key[data-scancode="88"] { flex-grow: 1.8 !important; }
  html[data-theme="cpc464"] .cpc-key[data-scancode="225"] { flex-grow: 1.85 !important; }
  html[data-theme="cpc464"] .cpc-key[data-scancode="81"] { flex-grow: 1.5 !important; }
}
@media (max-width: 370px) {
  #cp-toolbar { padding-left: 8px; padding-right: 8px; }
  .cp-main-controls { gap: 4px; }
  #cp-toolbar .cp-icon { flex-direction: column; gap: 4px; min-height: 52px; padding: 7px 2px; font-size: 10px; }
  #cp-toolbar .cp-extra-controls .cp-icon { flex-direction: row; }
  .cp-session-meta { font-size: 9px; }
}
/* Sur un petit téléphone, l'espace utile revient au CPC et aux commandes de jeu. */
@media (orientation: portrait) and (max-height: 740px) {
  html.cp-touch-active #cp-toolbar { gap: 8px; padding: 8px; }
  html.cp-touch-active .cp-brand { display: none; }
  html.cp-touch-active #cp-toolbar .cp-icon { flex-direction: row; gap: 4px; min-height: 44px; padding: 8px 4px; }
  html.cp-touch-active #cp-workspace-head { display: none; }
  html.cp-touch-active #cp-workspace-foot { padding: 8px 14px; font-size: 9px; }
  html.cp-touch-active #cp-layout-status { padding: 3px 5px; font-size: 8px; }
  html.cp-touch-active #cp-touch-controls { gap: 12px; padding: 4px 20px 12px; }
  html.cp-touch-active .cp-stick-cluster { width: 128px; gap: 6px; }
  html.cp-touch-active .cp-fire-cluster { width: 108px; padding-top: 14px; }
  html.cp-touch-active .cp-touch-label { font-size: 8px; }
  html.cp-touch-active .cp-touch-help { font-size: 9px; }
  html.cp-touch-active #cp-joystick-pad { width: 128px; height: 128px; }
  html.cp-touch-active #cp-joystick-thumb { width: 54px; height: 54px; }
  html.cp-touch-active #cp-fire-button { width: 76px; height: 76px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #cp-toolbar { flex-direction: row; align-items: center; padding: 8px 12px; gap: 10px; }
  .cp-brand { width: auto; }
  .cp-brand-sub { display: none; }
  .cp-brand-mark { flex-basis: 30px; width: 30px; height: 30px; }
  .cp-main-controls { width: auto; flex: 1; }
  #cp-workspace-head { display: none; }
  .cp-screen-caption p, .cp-screen-caption small { display: none; }
  #cp-workspace-foot { padding-top: 9px; padding-bottom: 9px; }
  #cp-phone-panel { max-height: 65svh; }
  html.cp-touch-active #cp-workspace-foot { display: none; }
  #cp-touch-controls { position: fixed; z-index: 90; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: none; margin: 0; padding: 0; align-items: end; pointer-events: none; }
  .cp-stick-cluster, .cp-fire-cluster { pointer-events: auto; }
  .cp-stick-cluster { width: 128px; gap: 8px; }
  .cp-fire-cluster { width: 116px; gap: 10px; }
  #cp-joystick-pad { width: 128px; height: 128px; }
  #cp-joystick-thumb { width: 54px; height: 54px; }
  html[data-theme="cpc464"] .cpc464-keyboard[data-keyboard-open="true"] { max-height: calc(100svh - 12px) !important; max-height: calc(100dvh - 12px) !important; }
  html[data-theme="cpc464"] .cpc-key { min-height: 34px !important; }
}
@media (prefers-reduced-motion: reduce) {
  [id^="cp-"] *, .cpc464-keyboard * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}