*{box-sizing:border-box;margin:0;padding:0}
body{background:#0b0b12;color:#e8e8f0;font-family:Consolas,monospace;display:flex;justify-content:center;min-height:100vh}
#wrap{position:relative;width:960px;max-width:100vw}
#game{width:100%;background:#14141f;display:block;image-rendering:pixelated;border:2px solid #2a2a3a}
#hud{pointer-events:none;position:absolute;inset:0}
#hpbar{position:absolute;top:10px;left:10px;width:260px;height:22px;background:#300;border:1px solid #666}
#hpfill{height:100%;width:100%;background:linear-gradient(90deg,#ff2e63,#ff9a3d)}
#hptext{position:absolute;inset:0;text-align:center;font-size:13px;line-height:22px;color:#fff;text-shadow:1px 1px #000}
#enbar{position:absolute;top:36px;left:10px;width:260px;height:10px;background:#012;border:1px solid #666}
#enfill{height:100%;width:100%;background:#33e6ff}
#echoes{position:absolute;top:50px;left:10px;color:#ffd933;font-weight:bold;text-shadow:1px 1px #000}
#weapon{position:absolute;top:72px;left:10px;color:#9df;font-size:13px}
#difflabel{position:absolute;top:92px;left:10px;color:#ffd933;font-size:12px;text-shadow:1px 1px #000}
#combopips{position:absolute;top:112px;left:10px;display:flex;gap:5px}
#combopips i{width:9px;height:9px;border:1px solid #555;background:#111;display:block}
#combopips i.on{background:var(--wc,#ffd933);border-color:var(--wc,#ffd933);box-shadow:0 0 6px var(--wc,#ffd933)}
#rhythm{position:absolute;top:10px;right:260px;width:150px;text-align:center;background:#000a;border:1px solid #555;padding:4px}
#pulse{width:26px;height:26px;margin:0 auto;background:#333;border:2px solid #888}
#pulse.beat{background:#777;box-shadow:0 0 6px #777}
#pulse.kick{background:#ff3344;box-shadow:0 0 16px #ff3344;transform:scale(1.25)}
#bpmlabel{font-size:12px}#timelabel{font-size:13px;font-weight:bold;min-height:18px}
#minimap{position:absolute;top:10px;right:10px;background:#000a;border:1px solid #555}
#hint{position:absolute;bottom:8px;left:10px;font-size:12px;color:#ccc;text-shadow:1px 1px #000}
.overlay{position:absolute;inset:0;background:#0b0b10f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10;text-align:center;padding:24px;border-top:2px solid #33e6ff33;overflow:hidden}
.waves{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.menu-panel{position:relative;z-index:1}
#title{z-index:20}
#slideStart{position:relative;width:280px;max-width:78vw;height:56px;border-radius:28px;background:#14141fee;border:2px solid #33e6ff;cursor:grab;touch-action:none;user-select:none;outline:none;margin-top:10px}
#slideStart:focus-visible{outline:3px solid #33e6ff;outline-offset:2px}
.sc-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#8a93a6;pointer-events:none;white-space:nowrap}
.sc-fill{position:absolute;top:4px;left:4px;height:48px;width:48px;border-radius:24px;background:linear-gradient(90deg,#ffd933,#ffe673);pointer-events:none}
.sc-handle{position:absolute;top:4px;left:4px;width:48px;height:48px;border-radius:50%;background:#ffd933;color:#111;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:bold;pointer-events:none}
#slideStart.anim .sc-fill,#slideStart.anim .sc-handle{transition:left .25s ease-out,width .25s ease-out,background-color .2s}
#slideStart.done{cursor:default}
#slideStart.done .sc-fill{background:linear-gradient(90deg,#3f6,#7fe6a0)}
#slideStart.done .sc-handle{background:#3f6;color:#fff}
.hidden{display:none!important}
/* FUI menu system: one panel, clear CTA hierarchy, visible keyboard focus */
.menu-panel{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:620px;width:100%}
.menu-label{font-size:11px;letter-spacing:2px;color:#94a3b8;text-transform:uppercase}
.btn-primary{background:#ffd933;border-color:#ffd933;color:#000;font-weight:bold;min-width:280px;box-shadow:0 0 18px #ffd93344}
.btn-primary:hover{background:#ffe673;color:#000}
.btn-ghost{background:transparent;border-color:#3a3a5c;color:#e8e8f0;min-width:280px}
.btn-ghost:hover{border-color:#33e6ff;color:#33e6ff;background:#33e6ff11}
button:focus-visible,.dsect:focus-visible,.pkey:focus-visible,.lane:focus-visible{outline:3px solid #33e6ff;outline-offset:2px}
.dsect[aria-pressed="true"],.dsect.sel{outline:3px solid #ffd933;transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;transform:none!important;box-shadow:none!important}}
h1{font-size:34px;letter-spacing:3px;color:#ffd933;text-shadow:2px 2px #f0f}
.sub{color:#9df}.controls{font-size:12px;color:#aaa;max-width:640px}.credit{font-size:11px;color:#777}.credit a{color:#8af}
button{pointer-events:auto;background:#22283a;color:#fff;border:2px solid #33e6ff;padding:10px 22px;font-family:inherit;font-size:15px;cursor:pointer}
button:hover{background:#33e6ff;color:#000}
#skillGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;max-height:320px;overflow:auto;width:100%}
.scard{background:#1a1a28;border:2px solid #555;padding:8px;font-size:12px}
.scard.ok{border-color:#3f6;color:#bfb}.scard.av{border-color:#fff}.scard.lock{opacity:.5}
.scard button{padding:4px 8px;font-size:12px;margin-top:6px}
#pianoKeys{display:flex;gap:12px}
.dsect,.pkey,.lane{display:flex;align-items:center;justify-content:center;font-weight:bold;cursor:pointer}
.pkey{width:80px;height:80px;font-size:26px;border:3px solid #888;background:#222}
.pkey:nth-child(1){background:#33e6ff55}.pkey:nth-child(2){background:#b34dff55}.pkey:nth-child(3){background:#ffd93355}.pkey:nth-child(4){background:#33ff9955}
.pkey.lit{outline:4px solid #fff;filter:brightness(1.8)}
#diffsel{display:flex;gap:10px}
.dsect{width:110px;height:40px;border:3px solid #888;background:#222;pointer-events:auto}
.dsect[data-d="easy"]{background:#33ff9955}.dsect[data-d="normal"]{background:#33e6ff55}.dsect[data-d="hard"]{background:#ff407355}
.dsect.sel{outline:4px solid #ffd933;transform:scale(1.05)}
#howGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;max-width:560px;width:100%}
.hcard{background:#1a1a28;border:2px solid #ffd933;padding:10px;font-size:13px;line-height:1.5}
#lanes{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .22s ease}
#lanes.on{opacity:1;pointer-events:auto}
.lane{width:44px;height:44px;font-size:18px;border:3px solid #888;background:#111c;opacity:.55;pointer-events:auto;flex-direction:column;line-height:1.1;transition:opacity .12s,transform .12s,background .12s}
.lane small{font-size:10px;color:#999;font-weight:normal}
.lane[data-k="0"]{border-color:#33e6ff}.lane[data-k="1"]{border-color:#b34dff}.lane[data-k="2"]{border-color:#ffd933}.lane[data-k="3"]{border-color:#33ff99}
.lane.near{opacity:1;transform:scale(1.12);box-shadow:0 0 10px #fff}
.lane.lit{background:#fff;color:#000;transform:scale(1.2)}
/* Sugerencias: botón discreto en la pantalla de inicio + modal simple */
.suggest-open{position:absolute;right:10px;bottom:10px;z-index:30;min-width:0;padding:6px 10px;font-size:11px;line-height:1.2;color:#8a93a6;background:#0b0b12cc;border:1px solid #3a3a5c;box-shadow:none;opacity:.85}
.suggest-open:hover{color:#ffd933;border-color:#ffd933;background:#0b0b12;opacity:1}
#suggest{z-index:30}
#suggestText{width:100%;max-width:460px;min-height:110px;padding:10px;color:#e8e8f0;background:#0b0b12;border:2px solid #3a3a5c;font:14px/1.4 Consolas,monospace;outline:none;resize:vertical}
#suggestText:focus{border-color:#33e6ff}
.suggest-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.suggest-actions .btn-primary,.suggest-actions .btn-ghost{min-width:120px}
.suggest-status{min-height:18px;font-size:12px;color:#8a93a6}