/* Controller setup (js/ui/controllerSetup.js): the "press each button"
 * screen and the notice for a controller the browser does not recognise.
 * Same card language as the keyboard controls editor; 44px targets. */
#controllerSetup{box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:2px solid #103f4d;border-radius:18px;background:#fff7df;color:#103f4d;box-shadow:0 20px 90px #061a2b80;overflow:auto;overscroll-behavior:contain;font:14px/1.45 system-ui,sans-serif}
#controllerSetup::backdrop{background:#092a40b8;backdrop-filter:blur(4px)}
#controllerSetup .padCard{padding:20px 22px 0;margin:0}
#controllerSetup header{display:flex;justify-content:space-between;align-items:center;gap:12px}
#controllerSetup h2{margin:3px 0 0;font:32px/1.1 var(--font-meme,Anton,Impact,sans-serif)}
#controllerSetup .padEyebrow{margin:0;font-size:10px;letter-spacing:.13em;font-weight:800;color:#526c63}
#controllerSetup button{min-height:44px;padding:8px 12px;border:1px solid #8da4a0;border-radius:10px;background:#fffdf5;color:#103f4d;font:700 14px/1.3 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
#controllerSetup button:focus-visible{outline:3px solid #ff9f1a;outline-offset:2px}
#controllerSetup button[hidden]{display:none}
#controllerSetup .padClose{flex:none;width:44px;padding:0;font-size:25px;border-radius:50%;background:#ffd853}
#controllerSetup .padDevice{margin:12px 0 4px;font-size:12px;color:#456161;overflow-wrap:anywhere}
#controllerSetup .padPrompt{margin:6px 0;padding:10px 12px;border-radius:12px;background:#ffd853;font-weight:800;font-size:16px;line-height:1.35}
#controllerSetup .padLive{margin:4px 0 8px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#456161;overflow-wrap:anywhere}
#controllerSetup .padTable{width:100%;border-collapse:collapse;margin:4px 0}
#controllerSetup .padTable th,#controllerSetup .padTable td{padding:5px 6px;text-align:left;border-top:1px solid #d8dcc4}
#controllerSetup .padTable thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#526c63;border-top:0}
#controllerSetup .padTable tbody th{font-weight:700}
#controllerSetup .padTable small{font-weight:500;color:#6a7f7c}
#controllerSetup .padTable .padCurrent{background:#ffe9a3}
#controllerSetup .padNote{margin:8px 0;font-size:12px;color:#456161}
#controllerSetup .padStatus{min-height:1.5em;margin:6px 0;font-weight:700}
#controllerSetup footer{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0 -22px;padding:12px 22px;background:#fff7df;border-top:1px solid #d8dcc4}
#controllerSetup .padSave{background:#ffd853;border-color:#103f4d;min-width:110px}
@media (max-height:500px){#controllerSetup .padCard{padding:10px 16px 0}#controllerSetup h2{font-size:22px}#controllerSetup .padEyebrow{display:none}#controllerSetup footer{margin:0 -16px;padding:8px 16px}}
/* Notice: top centre (the update notice owns bottom centre), above the
 * menu, Help and results (50-60), below the update notice (70), the rotate
 * gate (200) and every modal dialog. */
#padNotice{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:65;box-sizing:border-box;width:min(520px,calc(100vw - 32px));padding:12px 14px;border:2px solid #103f4d;border-radius:14px;background:#fff7df;color:#103f4d;box-shadow:0 10px 40px #061a2b80;font:13px/1.4 system-ui,sans-serif}
#padNotice[hidden]{display:none}
#padNotice p{margin:0 0 8px}
#padNotice div{display:flex;flex-wrap:wrap;gap:8px}
#padNotice button{min-height:44px;padding:8px 12px;border:1px solid #8da4a0;border-radius:10px;background:#fffdf5;color:#103f4d;font:700 13px/1.3 system-ui,sans-serif;cursor:pointer}
#padNotice .padNoticeSetup{background:#ffd853;border-color:#103f4d}
#padNotice button:focus-visible{outline:3px solid #ff9f1a;outline-offset:2px}