.controller-mode {padding-bottom:170px}
#controller-dock{position:fixed;z-index:30;bottom:12px;left:12px;right:12px;padding:16px 22px;border:1px solid #b5c8ad70;border-top:3px solid #e8c387;border-radius:12px;background:#182a2b;color:#f7ebcf;box-shadow:0 8px 40px #071515a0;font-family:Arial,sans-serif;text-align:left}
#controller-dock[hidden]{display:none}.pad-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.pad-title{font-size:20px;line-height:1.3}.pad-seat{font-size:12px;font-weight:700;letter-spacing:1px;color:#d8bb87}.pad-detail{font-size:14px;line-height:1.4;color:#c3d4c6;margin:7px 0 12px}.pad-hints{display:flex;flex-wrap:wrap;gap:10px 24px}.pad-hints>span{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600}.pad-key{display:inline-grid;place-items:center;min-width:34px;min-height:32px;padding:4px 8px;background:#3c5050;border:1px solid #b8cab8;border-bottom-width:3px;border-radius:7px;color:#f9f0d8;font:700 14px Arial,sans-serif;white-space:nowrap;box-sizing:border-box}.pad-key.a{border-radius:50%;background:#284d35;border-color:#9ee398;color:#cdffca}.pad-key.b{border-radius:50%;background:#552c32;border-color:#f297a4;color:#ffccd1}.pad-key.x{background:#27435c;border-color:#a0c7f0;color:#d4eaff}.pad-key.y{background:#51462a;border-color:#e8d289;color:#fff1ba}
#controller-dock[data-stage="preview"]{border-top-color:#d9b2f4}
.controller-mode .controller-bar{font-size:13px}.controller-mode .controller-bar #controller-hint{display:none}
.controller-mode .turn-panel{max-height:calc(100vh - 195px)}
.controller-mode #moment{bottom:185px}
dialog #controller-dock{position:sticky;inset:auto;bottom:-1px;margin:24px 0 0;padding:14px;width:auto;box-shadow:none}.controller-mode dialog{scroll-padding-block:20px 165px}dialog .pad-title{font-size:16px}dialog .pad-seat{display:none}dialog .pad-hints{gap:10px}dialog .pad-hints>span{font-size:12px}dialog .pad-detail{font-size:12px}
#controllers-help{width:900px;max-width:calc(100vw - 32px);background:#213233;color:#e6e9d5;border-color:#96a790;padding:32px}#controllers-help h2{font:800 32px Arial,sans-serif;color:#f2dbad;margin:8px 0 14px}#controllers-help .pad-intro{font-size:15px;line-height:1.6;color:#cdd8c8}.pad-map{max-width:580px;margin:10px auto 16px}.pad-map svg{display:block;width:100%;height:auto}.pad-reference{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pad-reference section{padding:15px;background:#162829;border:1px solid #81957d50;border-radius:8px}.pad-reference h3{font:700 15px Arial,sans-serif;color:#f4dfb7;margin:12px 0 7px}#controllers-help .pad-reference p{font-size:13px;line-height:1.55;margin:0;color:#c2d1c3}#controllers-help .pad-menu-note,#controllers-help details{font-size:13px;line-height:1.6;color:#c2d1c3}#controllers-help summary{cursor:pointer;color:#f1d49d;padding:12px 0}
@media(max-width:800px){#controller-dock{padding:12px;bottom:6px;left:6px;right:6px}.pad-heading{flex-wrap:wrap;gap:5px}.pad-title{font-size:17px}.pad-seat{font-size:10px}.pad-hints{gap:8px 14px}.pad-hints>span{font-size:12px}.pad-detail{font-size:12px}.pad-key{min-width:28px;min-height:28px;font-size:12px}.controller-mode{padding-bottom:220px}.controller-mode .turn-panel{max-height:none}.pad-reference{grid-template-columns:repeat(2,minmax(0,1fr))}#controllers-help{padding:24px 18px}}
@media(max-width:450px){.pad-reference{grid-template-columns:1fr}.pad-seat{display:none}}