/* Dedicated 1280×720 HUD scales with the playable stage on any viewport. */
#level2{position:fixed;inset:0;z-index:100;background:#040a12;color:#efe4cf;font-family:Arial,Helvetica,sans-serif;touch-action:none}
.l2stage{position:absolute;left:50%;top:50%;transform-origin:center;overflow:hidden;background:#081727}
#l2canvas{position:absolute;inset:0;display:block;width:1280px;height:720px;outline:0}
.l2hud{position:absolute;top:24px;left:32px;right:32px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none}
.l2identity{width:282px;padding:14px 18px;background:#09151ddd;border:1px solid #d6b78940;border-radius:8px;backdrop-filter:blur(12px)}
.l2identity>span{font-size:9px;letter-spacing:2px;color:#d4b888;font-weight:700}.l2identity>strong{display:block;margin-top:7px;font-size:20px;font-weight:700;letter-spacing:-.4px}
.l2track{position:relative;height:3px;background:#afc3c32b;margin-top:14px}.l2track>i{position:absolute;inset:0 auto 0 0;background:#cab588}.l2track>b{position:absolute;top:-2px;width:2px;height:7px;background:#ded8be}
.l2status{display:flex;align-items:flex-start;gap:9px}.l2health{display:grid;grid-template-columns:1fr auto;gap:8px;width:186px;background:#09151ded;padding:13px 15px;border:1px solid #d7c29a40;border-radius:8px}.l2health span{font-size:9px;letter-spacing:1px;align-self:center}.l2health strong{font-size:16px}.l2health>div{height:5px;grid-column:1/-1;background:#f0ddbc25;border-radius:4px;overflow:hidden}.l2health i{display:block;width:100%;height:100%;background:#ecdbb6;transition:width .2s}
.l2date{width:104px;padding:9px 13px 10px;background:#e5d9b7;color:#263d38;transform:rotate(2deg);box-shadow:0 3px 12px #0005;border-radius:2px;border-bottom:5px double #617365}.l2date>span{font-size:9px;letter-spacing:1.6px;font-weight:800}.l2date>strong{display:block;font-size:27px;line-height:1.2}.l2date small{font-size:9px;letter-spacing:1px}.l2date.urgent{background:#eaa18c;color:#402923}
.l2status button{width:42px;height:42px;pointer-events:auto;border:1px solid #d6b78955;background:#0b1924e8;border-radius:7px;font-size:20px;color:#e9d8b3}.l2status button:hover{background:#29414a}
.l2sub{position:absolute;top:139px;left:35px;display:flex;align-items:center;gap:17px;font-size:12px;text-shadow:0 2px 4px #000}.l2sub b{color:#f3d391}.l2sub>span:nth-child(3){letter-spacing:2px;font-weight:700}.l2sub #l2powers{font-size:10px;color:#d2e6bd;letter-spacing:.4px;background:#061724aa;border-radius:4px;padding:5px 8px}.l2sub #l2powers:empty{display:none}
#l2notice{position:absolute;bottom:99px;left:50%;transform:translate(-50%,8px);max-width:780px;white-space:normal;text-align:center;padding:11px 20px;background:#0a1923eb;border:1px solid #ddc7a747;border-radius:7px;color:#eee3cb;font-size:13px;line-height:1.45;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none}#l2notice.visible{opacity:1;transform:translate(-50%,0)}
.l2controlsHint{position:absolute;bottom:24px;left:32px;right:32px;display:flex;gap:25px;font-size:10px;letter-spacing:.8px;color:#d0d7d7;background:#081724a6;padding:10px 14px;border-radius:5px;pointer-events:none}
#l2bossHud{position:absolute;top:128px;left:460px;width:480px;padding:10px 15px 11px;background:#0a1724ed;border:1px solid #e2a37c66;border-radius:6px}#l2bossHud[hidden]{display:none}#l2bossHud>span{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px}#l2bossHud>div{height:5px;background:#7b58543b;margin:8px 0}#l2bossFill{display:block;height:100%;background:#d5967c;transition:width .1s}#l2bossTip{display:block;color:#e0d2ae;text-align:center;font-size:10px;letter-spacing:.4px}
.l2overlay{position:absolute;inset:0;display:grid;place-items:center;background:#03121bbb;backdrop-filter:blur(6px);z-index:10}.l2overlay[hidden]{display:none}.l2panel{width:460px;max-height:680px;overflow:auto;padding:32px 40px;background:linear-gradient(145deg,#182c36,#081823);border:1px solid #c5ae8555;border-radius:12px;box-shadow:0 20px 100px #0008}.l2eyebrow{font-size:9px;letter-spacing:2px;color:#d3b889}.l2panel h2{font-size:48px;line-height:1;letter-spacing:-2px;margin:21px 0 18px}.l2panel h2 span{color:#d5a871}.l2panel p{font-size:14px;line-height:1.6;color:#b9c9ca}.l2panel>button{display:block;width:100%;padding:13px 15px;text-align:left;background:#ffffff06;border-bottom:1px solid #ffffff17;font-size:13px}.l2panel>button:hover{background:#ffffff10}.l2panel button.l2primary{background:#e7d9b9;color:#132a34;font-size:12px;font-weight:800;letter-spacing:1px;border-radius:4px;margin:24px 0 9px;padding:17px}.l2panel label{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:10px 15px;border-bottom:1px solid #ffffff17}.l2panel input{accent-color:#d7b381}.l2panel input[type=range]{width:150px}.l2panel .l2muted{font-size:12px;color:#90a5b0}.l2results{display:flex;justify-content:space-between;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;padding:18px 0;margin:22px 0}.l2results span{font-size:8px;letter-spacing:.6px}.l2results b{display:block;font-size:22px;letter-spacing:0;margin-top:5px}#l2loadProgress{width:100%;height:6px;accent-color:#d7b381;margin-top:18px}
#l2touch{display:none;position:absolute;bottom:18px;left:20px;right:20px;justify-content:space-between;pointer-events:none}#l2touch>div{display:flex;gap:10px}#l2touch button{pointer-events:auto;touch-action:none;user-select:none;width:76px;height:66px;border-radius:13px;border:1px solid #dce2cb77;background:#112735cc;font-size:14px;font-weight:700;color:#f0e3c3}#l2touch button[data-k=Space]{width:100px;background:#d7c098df;color:#1a343e}#l2touch button.pressed{transform:translateY(3px);background:#446670}
.route-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.route.level2-route{border-color:#c2a07388}.route.level2-route img{filter:saturate(.85)}
@media(pointer:coarse){#l2touch{display:flex}.l2controlsHint{display:none}#l2notice{bottom:105px}.l2status button{width:58px;height:53px;font-size:24px}}
@media(max-width:600px){.route-grid{grid-template-columns:1fr}.route img{height:90px}}
@media(prefers-reduced-motion:reduce){#level2 *{transition:none!important}}
@media(pointer:coarse){#l2touch button{width:90px;height:82px;font-size:17px}#l2touch button[data-k=Space]{width:110px}.l2status button{width:82px;height:78px;font-size:30px}.l2identity>strong{font-size:23px}.l2panel{width:570px;padding:24px 36px}.l2panel>button,.l2panel label{font-size:19px}.l2panel p{font-size:18px}.l2panel h2{margin:15px 0}.l2panel button.l2primary{font-size:18px;margin-top:18px}.l2identity,.l2overlay{backdrop-filter:none}}

/* ---------- V7 Premium ---------- */
.l2sub #l2powers{display:flex;gap:6px;background:none;padding:0}
.l2chip{position:relative;overflow:hidden;display:block;border-radius:7px;padding:6px 10px;background:#061724dd;border:1px solid #ffffff40;font-size:10px;letter-spacing:.8px;color:#efe4cf}
.l2chip b{position:relative;z-index:1;font-weight:700}
.l2chip i{position:absolute;left:0;bottom:0;height:3px;background:#fff}
.l2chip.cacao{border-color:#b07a4a}.l2chip.cacao i{background:#d09a68}
.l2chip.uht{animation:l2rainbow 1s linear infinite}.l2chip.uht i{background:#fff}
.l2chip.shield{border-color:#7cc4ff}.l2chip.shield i{background:#7cc4ff}
.l2chip.clone{border-color:#ff9fb8}.l2chip.clone i{background:#ff9fb8}
.l2chip.toxic{border-color:#b9e36a;color:#d8f5a0}.l2chip.toxic i{background:#b9e36a}
.l2chip.tag{border-color:#efdab2}.l2chip.tag i{display:none}
.l2chip.combo{border-color:#ffd23f;color:#ffd23f;animation:l2pop .3s ease-out}.l2chip.combo i{display:none}
.l2chip.wind{border-color:#cfe3ff}.l2chip.wind i{background:#cfe3ff}
@keyframes l2rainbow{to{filter:hue-rotate(360deg)}}
@keyframes l2pop{from{transform:scale(1.3)}}
.l2health.flash{animation:l2heal .5s ease-out 2;border-color:#9ff0c6}
@keyframes l2heal{50%{box-shadow:0 0 22px #9ff0c6;background:#173a2ded}}
.city-cinema{position:fixed;inset:0;z-index:1200;background:#030916;display:grid;place-items:center;font-family:Arial,sans-serif;color:#e9dfca}.city-cinema canvas{display:block;width:min(100vw,177.7778vh);height:min(56.25vw,100vh)}.city-controls{position:absolute;inset:20px 28px auto;display:flex;justify-content:space-between;align-items:center;gap:15px;letter-spacing:1.8px;font-size:10px}.city-controls>div{display:flex;gap:8px}.city-controls button{padding:12px 15px;border-radius:7px;border:1px solid #8ca3bd60;background:#091a2bec;font-size:12px;color:#eee4ce}.city-controls button:focus-visible{outline:3px solid #c9d8e5;outline-offset:3px}.city-caption{position:absolute;bottom:7%;left:10%;right:10%;margin:0;text-align:center;font-size:clamp(14px,1.6vw,21px);padding:12px 18px;background:#061323d9;border:1px solid #c0cfe01f;border-radius:6px;line-height:1.5}.city-paused{position:absolute;inset:0;display:grid;place-items:center;background:#01081699;font-size:32px;letter-spacing:6px;pointer-events:none}.city-paused[hidden]{display:none}.city-caption[hidden]{display:none}@media(max-width:700px),(max-height:500px){.city-controls{inset:8px 12px auto}.city-controls>span{display:none}.city-controls>div{margin-left:auto}.city-controls button{min-height:44px;font-size:11px;padding:9px 12px}.city-caption{bottom:5%;font-size:14px}}

/* V9.1: foco visible y respeto de movimiento reducido. */
#level2 button:focus-visible,#level2 input:focus-visible{outline:3px solid #a8eaff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#level2 *{animation:none!important;transition:none!important}}