*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Trebuchet MS",system-ui,sans-serif;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#ffcf9c88,#7a4fa088);color:#fff;text-shadow:0 3px 0 #6b3a7a}
#title h1{font-size:min(12vw,96px);margin:0;letter-spacing:2px}#title p{font-size:24px;margin:8px 0 28px}
#title small{margin-top:20px;opacity:.9}
#start{font-size:30px;padding:16px 44px;border:0;border-radius:40px;background:#ff8fb1;color:#fff;box-shadow:0 6px 0 #c2507a;font-weight:bold}
.hide{display:none!important}
#joy{position:fixed;left:40px;bottom:40px;width:170px;height:170px;border-radius:50%;background:#fff3;border:3px solid #fff8}
#knob{position:absolute;left:55px;top:55px;width:60px;height:60px;border-radius:50%;background:#fffc}
#btns{position:fixed;right:30px;bottom:30px;display:grid;grid-template-columns:auto auto;gap:12px;align-items:center}
#btns button{width:76px;height:76px;border-radius:50%;border:0;background:#fffc;font-size:26px;font-weight:bold;color:#6b3a7a}
#jump{grid-column:2;grid-row:1/4;width:110px!important;height:110px!important;background:#ff8fb1!important;color:#fff!important}
#gait{text-align:center;color:#fff;font-weight:bold;text-shadow:0 2px 0 #0008;font-size:20px}
#mute{position:fixed;top:16px;right:16px;width:54px;height:54px;border-radius:50%;border:0;background:#fffa;font-size:24px}
#err{position:fixed;top:0;left:0;color:red;font:12px monospace}
#qb{position:fixed;top:16px;right:80px;width:54px;height:54px;border-radius:50%;border:0;background:#fffa;font-size:16px;font-weight:bold;color:#6b3a7a}
#fps{position:fixed;left:8px;top:8px;color:#fff;font:13px monospace;text-shadow:0 1px 2px #000}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,#0000 60%,#3a1a4a33 100%)}
#hud,#title{z-index:2}
#pick{display:flex;flex-direction:column;align-items:center;margin:0 0 22px}#pick>span{font-size:22px;margin-bottom:10px;font-weight:bold}
#pick>div{display:flex;gap:18px}.card{display:flex;flex-direction:column;align-items:center;width:170px;padding:12px 10px;border:4px solid #fff8;border-radius:22px;background:#fff3;color:#fff;font-family:inherit;text-shadow:0 2px 0 #6b3a7a}
.card i{width:64px;height:64px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 #0003}.card b{font-size:22px;margin-top:6px}.card em{font-size:13px;font-style:normal;opacity:.9}
.card.sel{border-color:#fff;background:#ff8fb1aa;box-shadow:0 5px 0 #c2507a;transform:scale(1.06)}

#picks{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}#picks .card{width:150px}