/* Estilos del menú (hub), controles táctiles y sprites CSS */
html,body{height:100%;margin:0;background:#1a0f08;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,sans-serif}
canvas{position:fixed;inset:0;width:100%;height:100%}
#pad{display:none}
.pl #pad{display:block}
#pad button{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:72px;height:72px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);color:#fff;font-size:28px;touch-action:none}
#bl{left:calc(12px + env(safe-area-inset-left,0px))}
#br{left:calc(96px + env(safe-area-inset-left,0px))}
#bj{right:calc(16px + env(safe-area-inset-right,0px));width:88px!important;height:88px!important;background:rgba(255,210,122,.45)!important}
#bs{right:calc(116px + env(safe-area-inset-right,0px));background:rgba(200,160,120,.45)!important}
#pad button.art{background-color:transparent!important;background-image:var(--img)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;border:none;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
#bl.art{--img:var(--bl)}#br.art{--img:var(--br)}#bs.art{--img:var(--bs)}#bj.art{--img:var(--bj)}
#hub{display:none;position:fixed;inset:0;background:rgba(20,8,2,.94);overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;color:#f4e4c1;-webkit-user-select:text;user-select:text}
#hub .bx{max-width:420px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;line-height:1.4}
#hub h1{margin:4px 0 0;color:#ffd27a;font-size:40px}
#hub h3{margin:0 0 8px}
#hub p{font-size:14px;margin:6px 0 12px}
#hub .row{display:flex;gap:8px;justify-content:center;align-items:center;margin:10px 0;flex-wrap:wrap}
#hub input[type=text],#hub input[type=number]{background:#3a2314;border:1px solid #8a5a34;color:#fff;border-radius:8px;padding:9px;font-size:16px;width:120px}
#hub button{min-height:48px;border:0;border-radius:12px;background:#cfc4b4;color:#1a0f08;font-size:15px;font-weight:700;padding:8px 14px;margin:4px 0}
#shop button{display:block;width:100%;background:#e9c46a}
#shop button.no{opacity:.55}
#shop button:disabled{background:#6a6a5a;color:#ddd}
#play{background:#ffd27a!important;flex:1}
#st{font-weight:700;margin:6px 0}
#hub .nx{margin-top:18px;padding-top:12px;border-top:1px solid #5a3820;font-size:12.5px;line-height:1.5;color:#d9c9a8}
#hub .nx b{color:#ffd27a}
#hub .nx small{display:block;margin-top:6px;color:#a89a80}
#wd{font-size:13px;line-height:1.7;margin:8px 0}
#wd .g1{color:#9fe8a0}
#wd .g0{color:#8a7a66}
.spr{display:inline-block;background-image:var(--vest);background-repeat:no-repeat}
.tsp{display:inline-block;background-image:var(--tes);background-repeat:no-repeat}
.wg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0}
.wc{font-size:10.5px;line-height:1.25;color:#d9c9a8}
.wc small{display:block}
.wc.u small{color:#9fe8a0}
.wc.l .spr,.wc.l .tsp{filter:brightness(0);opacity:.35}
#mu{margin:10px 0;font-size:13px}
#hub .sl{color:#ffd27a;font-style:italic;font-size:17px;margin:2px 0 6px}
#hub .big{display:block;margin:12px auto;width:min(92%,380px);height:70px;font-size:26px;border-radius:18px;box-shadow:0 4px 0 #b8892a}
#hub .row3{display:flex;gap:8px;justify-content:center;margin:6px 0 10px}
#hub .row3 button{flex:1;max-width:118px;min-height:62px;font-size:12px;line-height:1.3;background:#3a2314;color:#f4e4c1;border:1px solid #8a5a34}
#hub .back{background:#3a2314!important;color:#f4e4c1!important;margin-bottom:6px}
#hub .pn{display:none}