/* A compact handheld controller, with its keyboard mapping on each button. */
main{max-width:1100px}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.page-heading h1{font-size:22px;letter-spacing:-.6px}.language-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:20px;flex:none}.language-switch button{font:600 12px system-ui;padding:6px 12px;border:0;border-radius:16px;background:transparent;color:var(--muted);cursor:pointer}.language-switch [aria-pressed=true]{background:var(--text);color:var(--bg)}.language-note{font-size:12px;color:var(--muted);margin:0 0 12px}button:focus-visible,[role=button]:focus-visible{outline:3px solid #81a8e8;outline-offset:4px}#disc-message{font-size:13px;color:var(--muted)}#disc-message:empty{display:none}#disc-retry{margin-bottom:12px;padding:8px 16px}.controller-title{font-size:14px;font-weight:600;margin:22px 0 5px}.controls,body.touch .controls{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"left mid right";align-items:center;gap:20px;max-width:660px;margin:14px auto 22px;padding:22px 30px;background:linear-gradient(150deg,var(--panel),var(--bg));border:1px solid var(--border);border-radius:70px 70px 100px 100px;box-shadow:0 8px 0 -3px var(--border);touch-action:none;user-select:none}.cluster{gap:13px}.cluster.mid{flex-direction:column;gap:14px;align-self:center}.ctl{cursor:pointer;font-family:inherit;gap:2px;flex-direction:column}.ctl kbd,.dpad kbd{font:500 10px/1.2 system-ui;color:var(--muted);padding:2px 4px;background:var(--panel);border:1px solid var(--border);border-radius:3px}.ctl>span{line-height:1.1}.shoulder{height:34px;flex-direction:row;gap:18px}.small{min-width:100px;height:43px;border-radius:7px}.small>span{font-size:10px;letter-spacing:1px}.face{grid-template-columns:repeat(3,45px);grid-template-rows:repeat(3,45px)}.face .ctl{font-size:23px}.tri>span{color:#48afaf}.sq>span{color:#b38bc3}.ci>span{color:#ce8a78}.cr>span{color:#7ca4d9}.dpad{width:120px;height:120px}.dpad [data-dir]{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:var(--ctl);border:1px solid var(--ctl-line);color:var(--ctl-text);font-family:inherit}.dpad [data-dir].on{background:var(--ctl-on)}.dpad [data-dir]>span{background:none;border:0;font-size:13px}.dpad [data-dir] kbd{font-size:9px;padding:0 3px}.stick{width:66px;height:66px}.knob{width:30px;height:30px;margin:-15px 0 0 -15px}.stick:after{content:'I · J · K · L';position:absolute;bottom:-18px;width:100%;text-align:center;white-space:nowrap;font-size:10px;color:var(--muted)}.name-help{display:flex;align-items:center;gap:16px;border-left:3px solid var(--accent);padding:12px 16px;background:var(--panel);margin:15px 0}.name-help[hidden]{display:none}.name-help p{margin:0;flex:1}.name-help button{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:10px 14px;font:600 13px system-ui;cursor:pointer}.diagnostics{margin-top:28px;color:var(--muted);font-size:12px}.diagnostics summary{cursor:pointer;margin-bottom:8px}.diagnostics pre{height:200px}.keys{margin-bottom:8px}.bar .actions{flex-wrap:wrap;justify-content:flex-end}.immersive .page-heading,.immersive .language-note,.immersive .controller-title,.immersive .diagnostics,.immersive .name-help{display:none}body.immersive:not(.touch) .controls{display:none}.no-controls .controls{display:none!important}#osk-dialog form{min-width:240px}#osk-dialog button{font:inherit;padding:9px 13px;border-radius:6px;border:1px solid #555;cursor:pointer}#osk-confirm{background:#6c9cff;color:#111;border-color:#6c9cff!important}
@media(max-width:600px){main{padding:16px 12px}.page-heading h1{font-size:20px}.sub{font-size:12px}.actions{margin-left:0}.bar{gap:8px}.bar .actions{width:100%;justify-content:flex-start;gap:5px}.bar button,.bar select{font-size:11px;padding:5px 7px}.controls,body.touch .controls{padding:18px 12px 26px;gap:5px;border-radius:38px 38px 65px 65px}.face{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,37px)}.face .ctl{font-size:20px}.dpad{width:96px;height:111px;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,37px)}.small{min-width:72px;padding:0 5px}.shoulder{max-width:110px}.stick{width:52px;height:52px}.name-help{flex-direction:column;align-items:stretch;font-size:12px}.controller-title{margin-top:15px}}