@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f5efe4;background:#151c29}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f2cb65;outline-offset:4px}canvas#game{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:fixed;top:0;width:100%;height:86px;padding:22px 4%;display:flex;align-items:center;gap:25px;z-index:3;background:linear-gradient(#111923cc,transparent)}header a{color:#f9f2e6;text-decoration:none;font:800 23px 'Barlow Condensed',sans-serif;letter-spacing:1px}header a b{color:#ff6b53}.subtitle{font-size:9px;letter-spacing:2px;color:#93a0ad}header button{margin-left:auto;background:#22303d;border:1px solid #5a6b76;border-radius:8px;width:40px;height:40px}#menu{position:absolute;inset:86px 0 0;padding:25px 6% 48px;display:grid;grid-template-columns:1fr 500px;align-items:center;gap:5%;overflow-y:auto;background:linear-gradient(90deg,#121b28f5,#121b28cc 50%,#121b2899)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#e6b65c}h1{font:900 clamp(58px,7.7vw,112px)/.92 'Barlow Condensed',sans-serif;letter-spacing:-1.5px;text-transform:uppercase;margin:25px 0}h1 em{font-style:normal;color:#ff765a}.intro p{color:#adb8c4;font-size:14px;line-height:1.85}.arena-label{margin-top:35px;display:flex;gap:12px;align-items:center;color:#efc45e;font-size:28px}.arena-label b{font-size:11px;letter-spacing:1.3px}.arena-label small{display:block;color:#8e9eae;font-size:10px;margin-top:5px}.roster{width:100%;max-width:530px}.section-label{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:1.6px;color:#9faebd;margin-bottom:15px}.section-label span:last-child{color:#edc260}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.creature{position:relative;min-width:0;background:#202d3ee8;border:1px solid #3c4b5e;border-radius:10px;padding:8px 5px 11px;text-align:center;transition:transform .15s,border-color .15s}.creature:hover{transform:translateY(-3px);border-color:#ebbb66}.creature.selected{border:1px solid #ff8664;background:#3d3436;box-shadow:inset 0 0 0 1px #ff866444}.creature canvas{width:76px;height:76px;display:block;margin:auto;pointer-events:none}.creature b{display:block;font-size:11px;white-space:nowrap}.creature small{display:block;font-size:8px;color:#9cabbc;text-transform:uppercase;letter-spacing:1px;margin:5px 0 0}#selected-info{min-height:72px;padding:15px 0 10px;font-size:12px}#selected-info strong{color:#efc45e}#selected-info small{display:block;margin-top:6px;color:#9eaebe;font-size:11px;line-height:1.5}.primary{width:100%;padding:18px 20px;background:#ff765a;border:0;border-radius:7px;color:#1b202b;text-align:left;font-size:12px;letter-spacing:1px;font-weight:800}.primary span{float:right}.primary:hover{background:#ff987b}.instructions{margin-top:14px;font-size:10px;color:#8f9fb0;line-height:1.8}#record{font-size:10px;color:#efc45e;margin-top:8px}footer{position:absolute;bottom:15px;left:6%;right:6%;font-size:8px;letter-spacing:1px;color:#7c8b9a}.corner{position:fixed;bottom:20px;right:4%;font-size:8px;letter-spacing:1.6px;color:#b5bac2;pointer-events:none}body.menu .corner{display:none}#hud{position:fixed;top:87px;left:50%;transform:translateX(-50%);width:min(540px,90vw);pointer-events:none;background:#142032dc;border:1px solid #52607466;padding:12px 18px;border-radius:12px}.stats{display:flex;justify-content:space-between;align-items:center;font-size:12px}.stats strong{font-size:22px;font-variant-numeric:tabular-nums}.xp{background:#3b4350;height:5px;border-radius:9px;overflow:hidden;margin:9px 0}.xp i{display:block;height:100%;background:#efc45e;width:0}#level{text-align:center;font-size:9px;letter-spacing:1px;color:#d8c28c}#ability{text-align:center;font-size:10px;margin-top:8px;color:#bcc9d6}.compact{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:430px;max-width:90vw;padding:28px;background:#182536fa;border:1px solid #b58a58;border-radius:15px;text-align:center;box-shadow:0 20px 100px #0009}.compact h2{font:800 36px 'Barlow Condensed';margin:5px 0 12px}.compact p{font-size:13px;line-height:1.7;color:#b5c3d2}.compact button{display:block;width:100%;margin-top:12px;padding:15px;border-radius:8px;border:1px solid #52647a;background:#29384b;text-align:left}.compact button:hover{border-color:#ff987b}.compact small{display:block;color:#a7b6c7;margin-top:5px}#stick{position:fixed;width:100px;height:100px;border-radius:50%;border:1px solid #efc45e88;background:#efc45e11;pointer-events:none}#stick i{position:absolute;left:32px;top:32px;width:36px;height:36px;border-radius:50%;background:#efc45e88}[hidden]{display:none!important}@media(max-width:1000px){#menu{grid-template-columns:1fr 440px;padding:15px 4% 50px;gap:3%}h1{font-size:76px}.eyebrow{font-size:8px}.creature b{font-size:10px}}@media(max-width:760px){header{height:65px;padding:15px 5%}header a{font-size:21px}.subtitle{display:none}#menu{inset:65px 0 0;display:block;padding:12px 6% 30px}.intro h1{font-size:52px;margin:15px 0 12px;line-height:.95}.intro h1 br{display:none}.intro p{font-size:12px;line-height:1.6;margin:10px 0}.intro p br{display:none}.arena-label{margin:16px 0 22px}.arena-label>span{font-size:22px}.roster{max-width:none}.creature canvas{width:62px;height:62px}.creature{padding:4px 3px 10px}.creature b{font-size:10px}#selected-info{min-height:68px}.instructions{font-size:9px}footer{position:static;margin-top:24px;font-size:7px;line-height:1.8}.corner{font-size:7px;bottom:12px}#hud{top:70px}}@media(max-height:720px) and (min-width:761px){#menu{align-items:start}.intro{padding-top:35px}h1{font-size:74px}.creature canvas{width:60px;height:60px}.arena-label{margin-top:20px}}
/* Sprite atlas presentation */
.creature canvas{width:100px;height:100px;image-rendering:pixelated}.choices{grid-template-columns:repeat(4,1fr)}.roster{max-width:640px}#menu{grid-template-columns:1fr 600px}.creature b{font-size:10px}#art-status{font-size:8px;color:#95b8a0;letter-spacing:1px;margin-top:8px}#selected-info{min-height:76px}.creature{overflow:hidden}@media(max-width:1160px){#menu{grid-template-columns:1fr 510px;padding-left:4%;padding-right:4%}h1{font-size:68px}.creature canvas{width:88px;height:88px}}@media(max-width:900px){#menu{display:block}.intro h1{font-size:58px}.intro h1 br{display:none}.intro p{font-size:12px}.arena-label{margin:15px 0 20px}.roster{max-width:none}.intro{padding-top:0}footer{position:static;margin-top:22px}.creature canvas{width:84px;height:84px}.choices{grid-template-columns:repeat(4,1fr)}}@media(max-width:480px){.choices{grid-template-columns:repeat(4,1fr);gap:6px}.creature canvas{width:64px;height:70px}.creature b{font-size:8px}.creature small{font-size:6px;letter-spacing:.2px}.intro h1{font-size:45px}.eyebrow{font-size:7px}.section-label{font-size:8px}}

#characters{max-height:335px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ec9b66 #202d3e;padding:3px}.boss-strip{display:flex;gap:12px;align-items:center;margin-top:18px;padding:8px 12px;background:#302238b8;border:1px solid #9f6c9d55;border-radius:10px;max-width:350px}.boss-strip canvas{width:75px;height:75px;image-rendering:pixelated}.boss-strip small{font-size:8px;letter-spacing:1px;color:#c69acb}.boss-strip b{display:block;font:800 26px "Barlow Condensed";color:#f0c4e8}.boss-strip span{display:block;font-size:10px;color:#b9a4bb}@media(max-width:900px){.boss-strip{margin:12px 0;max-width:none}.boss-strip canvas{width:55px;height:55px}.boss-strip b{font-size:22px}#characters{max-height:300px}}

/* Selección de escenarios */
.map-selection{margin-top:20px;max-width:520px}#maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.map-card{background:#1e2a39;border:1px solid #4f5b66;border-radius:8px;text-align:left;padding:0 0 9px;overflow:hidden;min-width:0}.map-card img{display:block;width:100%;height:68px;object-fit:cover;image-rendering:pixelated}.map-card b,.map-card small{display:block;padding:0 8px}.map-card b{font-size:10px;margin-top:8px}.map-card small{color:#97a8b8;font-size:8px;margin-top:4px}.map-card.selected{border-color:#efbd6a;box-shadow:0 0 0 1px #efbd6a55}.map-card:hover{border-color:#f9ce86}#map-status{font-size:8px;letter-spacing:1px;color:#a6bd9b;margin-top:7px}.intro h1{font-size:clamp(48px,6vw,82px);margin:16px 0}.intro .arena-label{margin-top:20px}.intro .boss-strip{margin-top:12px;padding:4px 10px}.intro .boss-strip canvas{width:50px;height:50px}.intro .boss-strip b{font-size:22px}.intro .eyebrow{font-size:8px}@media(max-width:900px){.map-selection{max-width:none;margin-top:14px}.map-card img{height:82px}.intro h1{font-size:50px}.intro .boss-strip{display:none}}@media(max-width:480px){.map-card b{font-size:9px}.map-card small{font-size:7px}.map-card img{height:64px}.intro h1{font-size:42px}}
footer{position:static;grid-column:1/-1;margin-top:12px}#menu{align-content:start;row-gap:18px}.map-card img{object-position:center 20%}

#portal-status{text-align:center;margin-top:8px;color:#e1b6ff;font-size:11px}#portal-enter{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);padding:15px 24px;border:1px solid #ddb1ff;border-radius:10px;background:#533273;color:#fff2ff;font-weight:700;z-index:4;box-shadow:0 0 25px #bd7bdf44}#portal-enter:hover{background:#714592}@media(max-width:600px){#portal-status{font-size:9px}#portal-enter{bottom:40px;width:80%}}

#loot-hud{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#e9d09b;margin-top:5px}#loot-icon{width:24px;height:24px;image-rendering:pixelated}#loot-message{min-height:12px;text-align:center;font-size:9px;color:#c8dfb1}#overlay{max-height:85vh;overflow-y:auto}

#dev-lab{margin-top:14px;padding:12px;border:1px solid #9a7cb4;border-radius:9px;background:#25263ce8;font-size:12px}#dev-lab summary{cursor:pointer;color:#e4b9ff;font-weight:700}#dev-lab label,#dev-lab small{display:block;margin-top:10px}#dev-lab select,#lab-start{width:100%;padding:10px;margin-top:8px;border:1px solid #806c96;border-radius:6px;background:#344058;color:#fff}#dev-lab small{font-size:10px;color:#c2b5d2}#lab-tools{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:8;padding:8px;background:#251d37ed;border:1px solid #ac87cd;border-radius:9px;display:flex;gap:7px;align-items:center;max-width:96vw;flex-wrap:wrap;justify-content:center}#lab-tools b{font-size:9px;color:#e7c1ff}#lab-tools button{padding:8px;border:1px solid #806899;border-radius:5px;background:#3a3150;font-size:11px}@media(max-width:600px){#lab-tools{bottom:8px;width:94%}#lab-tools button{font-size:10px;padding:7px}}

.loot-reveal{display:block;margin:0 auto 8px;width:96px;height:80px;image-rendering:pixelated;animation:loot-reveal .35s ease-out}@keyframes loot-reveal{from{transform:translateY(12px) scale(.6);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

@media(prefers-reduced-motion:reduce){.loot-reveal{animation:none}}

#audio-toggle{padding:9px 12px;border:1px solid #839284;border-radius:8px;background:#1c303ae8;color:#f5ead5;font-size:11px;cursor:pointer;white-space:nowrap}@media(max-width:600px){header .subtitle{display:none}#audio-toggle{font-size:10px;padding:8px}}

#audio-toggle{width:auto;min-width:110px;height:auto;flex-shrink:0}@media(max-width:600px){#audio-toggle{min-width:94px}}
#event-status{font-size:10px;color:#e7cb86;margin-top:6px}#event-start{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);z-index:8;padding:13px 18px;border:1px solid #e6c575;border-radius:8px;background:#394a36;color:#fff0c0;font-weight:bold;cursor:pointer;max-width:90vw}

/* Más espacio de combate para la cámara cercana. */
#hud.boss-hud{top:76px;padding:8px 14px;width:min(500px,90vw)}#hud.boss-hud .xp,#hud.boss-hud #level,#hud.boss-hud #ability,#hud.boss-hud #loot-hud,#hud.boss-hud #loot-message{display:none}#hud.boss-hud #portal-status{margin-top:4px;font-size:10px}@media(max-width:760px){#hud.boss-hud{top:65px;padding:7px 10px}#hud.boss-hud #portal-status{font-size:9px}}

#coop-panel{margin-top:20px;padding:18px;border:1px solid #73b4b7;border-radius:12px;background:#142b35;color:#f9efdf}#coop-panel h3{margin:0 0 8px;font-size:15px}#coop-panel p,#coop-panel small{font-size:12px;line-height:1.5}#coop-panel .coop-actions{display:flex;gap:8px;flex-wrap:wrap}#coop-panel button,#coop-panel input{padding:10px;border:1px solid #73b4b7;border-radius:6px;background:#213d49;color:#fff}#coop-panel input{width:120px;text-transform:uppercase}#coop-panel button:disabled{opacity:.5}#coop-status{overflow-wrap:anywhere}
#game-update{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);z-index:20;background:#edc86e;color:#17212c;border:2px solid #fff0c0;border-radius:8px;padding:12px 18px;font-weight:800;box-shadow:0 3px 18px #0006}

/* Exploración: panel compacto para liberar visión del terreno. */
#hud:not(.boss-hud){top:72px;width:min(470px,92vw);padding:8px 12px;border-radius:9px;background:#142032c9}#hud:not(.boss-hud) .stats strong{font-size:19px}#hud:not(.boss-hud) .xp{height:4px;margin:5px 0}#hud:not(.boss-hud) #ability{display:none}#hud:not(.boss-hud) #level{font-size:8px}#hud:not(.boss-hud) #loot-hud{margin-top:3px}#hud:not(.boss-hud) #loot-message:empty{display:none}#hud:not(.boss-hud) #event-status{margin-top:3px;font-size:9px}#hud:not(.boss-hud) #portal-status{margin-top:3px;font-size:9px}@media(max-width:760px){#hud:not(.boss-hud){top:64px;width:min(420px,94vw);padding:6px 9px}#hud:not(.boss-hud) .stats{font-size:10px}#hud:not(.boss-hud) .stats strong{font-size:17px}#hud:not(.boss-hud) #event-status{font-size:8px}#hud:not(.boss-hud) #loot-icon{width:18px;height:18px}}

#key-target{font-size:12px;font-weight:700;text-align:center;margin:5px 0 2px;line-height:1.4;text-shadow:0 1px 2px #10202a}@media(max-width:600px){#key-target{font-size:11px}}

.performance-settings{display:grid;gap:9px;margin-top:16px;padding:12px;border:1px solid #52647a;border-radius:8px;font-size:11px}.performance-settings label{display:block;color:#c4cfd9}.performance-settings select,.performance-settings button{width:100%;padding:10px;border:1px solid #657389;border-radius:5px;background:#223044;color:#f5efe4;font:inherit}#performance-panel{position:fixed;right:14px;top:96px;z-index:12;max-width:245px;background:#101c2dec;border:1px solid #7ba9b5;border-radius:8px;padding:10px 12px;color:#b9f1ce;font:11px/1.7 monospace;font-variant-numeric:tabular-nums;white-space:pre-line;pointer-events:none}#performance-stop{pointer-events:auto;display:block;margin-top:8px;padding:8px;border:1px solid #e3b365;border-radius:5px;background:#29384b;color:#fff0c9;font:11px sans-serif}@media(max-width:760px){#performance-panel{top:auto;bottom:14px;right:10px;max-width:210px;font-size:10px}}