.thedp-arq{position:relative;width:100%;aspect-ratio:9/16;max-height:86vh;max-width:min(100%,calc(86vh*9/16));margin:0 auto;overflow:hidden;border-radius:20px;border:4px solid #ffb800;box-shadow:0 8px 0 #a86f00,0 0 30px rgba(0,0,0,.35);background:#7cc6ff;user-select:none;-webkit-user-select:none;touch-action:none;font-family:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;color:#fff}
@media (orientation:landscape) and (min-width:900px){.thedp-arq{max-width:480px}}
.thedp-arq canvas{display:block;width:100%;height:100%}
.thedp-arq *{box-sizing:border-box}
.aq-hud{position:absolute;inset:0;pointer-events:none}
.aq-hud>*{pointer-events:none}
.aq-topbar{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;justify-content:flex-end}
.pill{background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 12px;font-size:15px;font-weight:900;text-shadow:0 2px 0 #000}
.aq-btop{position:absolute;top:8px;left:8px;right:8px;display:none;align-items:center;gap:6px}
.aq-hpbox{flex:1;min-width:0}
.aq-hpbox b{display:block;font-size:12px;text-shadow:0 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aq-hpbox.r{text-align:right}
.aq-hpbar{position:relative;height:22px;background:#3a0c0c;border:3px solid #fff;border-radius:10px;overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.aq-hpbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#7dff5a,#26b300);transition:width .35s}
.aq-hpbox.r .aq-hpbar i{left:auto;right:0;background:linear-gradient(#ff7a6a,#d20000)}
.aq-hpbar span{position:relative;display:block;text-align:center;font-size:14px;line-height:16px;font-weight:900;text-shadow:0 2px 0 #000}
.aq-vs{font-size:20px;color:#ffd23f;-webkit-text-stroke:1.5px #000;text-shadow:0 3px 0 #000}
.aq-banner{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;text-align:center;white-space:nowrap;font-size:clamp(28px,8vw,44px);font-weight:900;-webkit-text-stroke:2px #000;text-shadow:0 5px 0 #000;transition:transform .35s cubic-bezier(.3,1.8,.5,1),opacity .2s}
.aq-banner small{display:block;font-size:14px;-webkit-text-stroke:0;text-shadow:0 2px 3px #000;margin-top:6px}
.aq-banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.aq-banner.me{color:#ffd23f}.aq-banner.en{color:#ff4a3a}
.aq-count{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:90px;font-weight:900;color:#fff;-webkit-text-stroke:3px #000;text-shadow:0 6px 0 #000;transition:transform .2s}
.aq-count.on{transform:translate(-50%,-50%) scale(1)}
.aq-wind{position:absolute;top:52px;left:50%;transform:translateX(-50%);font-size:13px;background:rgba(0,0,0,.4);padding:3px 10px;border-radius:12px;text-shadow:0 1px 0 #000}
.aq-wind:empty{display:none}
.aq-quiver{position:absolute;right:12px;bottom:18px;display:flex;gap:4px}
.aq-quiver i{width:12px;height:46px;border-radius:3px;background:linear-gradient(#e20303 0 18%,#8a4b22 18% 88%,#cfd6dc 88%);box-shadow:0 3px 0 rgba(0,0,0,.4)}
.aq-quiver i.u{opacity:.25}
.aq-hint{position:absolute;left:16px;right:16px;bottom:80px;text-align:center;font-size:15px;background:rgba(0,0,0,.45);border-radius:14px;padding:10px;display:none;animation:aqBob 1.2s ease-in-out infinite}
@keyframes aqBob{50%{transform:translateY(-6px)}}
.aq-shield{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(78%,300px);display:none;flex-direction:column;align-items:center;gap:4px;padding:12px 10px 10px;border:0;border-radius:22px;font:900 34px/1 inherit;color:#fff;background:linear-gradient(#5aa9ff,#1e5fc4);box-shadow:0 7px 0 #0d2f66,0 10px 20px rgba(0,0,0,.4);pointer-events:auto!important;touch-action:none;cursor:pointer}
.aq-shield span{font-size:13px;letter-spacing:1px;text-shadow:0 2px 0 #0d2f66}
.aq-shield i{display:block;width:90%;height:8px;background:rgba(0,0,0,.35);border-radius:4px;overflow:hidden}
.aq-shield i b{display:block;height:100%;background:#ffd23f}
.aq-shield.on{transform:translateX(-50%) translateY(5px);box-shadow:0 2px 0 #0d2f66;background:linear-gradient(#ffe066,#f0a400)}
.aq-laser{position:absolute;width:26px;height:26px;margin:-13px;border-radius:50%;background:radial-gradient(#fff,#ff2020 40%,transparent 70%);opacity:0;box-shadow:0 0 30px 10px rgba(255,0,0,.6)}
.aq-laser.on{opacity:1;animation:aqBlink .2s infinite}
@keyframes aqBlink{50%{opacity:.4}}
.aq-pop{position:absolute;transform:translate(-50%,-50%);font-size:24px;font-weight:900;white-space:nowrap;text-align:center;-webkit-text-stroke:1.5px #000;text-shadow:0 3px 0 #000;animation:aqPop 1.2s forwards;pointer-events:none}
.aq-pop.dmg{color:#fff}.aq-pop.crit{color:#ffd23f;font-size:28px}.aq-pop.block{color:#7cc6ff}.aq-pop.miss{color:#ddd;font-size:18px}
@keyframes aqPop{0%{transform:translate(-50%,-50%) scale(.4)}20%{transform:translate(-50%,-80%) scale(1.2)}100%{transform:translate(-50%,-160%) scale(1);opacity:0}}
.aq-lobby{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 16px 96px;gap:12px;pointer-events:none}
.aq-lobby>*{pointer-events:auto}
.aq-title{position:absolute;top:58px;left:0;right:0;text-align:center;font-size:clamp(40px,12vw,58px);font-weight:900;color:#ffd23f;-webkit-text-stroke:2.5px #5a2a00;text-shadow:0 6px 0 #5a2a00,0 10px 20px rgba(0,0,0,.4);letter-spacing:2px;line-height:1}
.aq-title small{display:block;font-size:20px;color:#fff;-webkit-text-stroke:1px #5a2a00;text-shadow:0 3px 0 #5a2a00;letter-spacing:3px;margin-top:4px}
.aq-sub{font-size:13px;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:12px;text-align:center}
.aq-sub a{color:#ffd23f}
.aq-btn{display:inline-block;border:0;border-radius:14px;padding:10px 16px;font:900 15px/1 inherit;color:#fff;letter-spacing:1px;cursor:pointer;background:linear-gradient(#5aa9ff,#1e5fc4);box-shadow:0 5px 0 #0d2f66;text-shadow:0 2px 0 rgba(0,0,0,.4);transition:transform .08s}
.aq-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0d2f66}
.aq-btn.gold{background:linear-gradient(#ffe066,#f0a400);box-shadow:0 5px 0 #8a5a00;text-shadow:0 2px 0 #8a5a00}
.aq-btn.off{background:linear-gradient(#aaa,#777);box-shadow:0 5px 0 #444}
.aq-btn.ok{background:linear-gradient(#7dff5a,#1fae00);box-shadow:0 5px 0 #0d5a00}
.aq-btn.big{font-size:28px;padding:18px 46px;border-radius:20px;animation:aqPulse 1.6s infinite}
@keyframes aqPulse{50%{transform:scale(1.05)}}
.aq-nav{position:absolute;left:0;right:0;bottom:0;display:flex;background:linear-gradient(#1d3557,#0f1d33);border-top:3px solid #ffb800;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.aq-nav button{flex:1;background:none;border:0;color:#cfe2ff;font:900 22px/1 inherit;cursor:pointer;padding:4px 0;border-radius:12px}
.aq-nav button span{display:block;font-size:10px;margin-top:3px;letter-spacing:.5px}
.aq-nav button.on{background:linear-gradient(#3a6ea8,#244a78);color:#fff;transform:translateY(-6px);box-shadow:0 4px 0 #0f1d33}
.aq-panel{position:absolute;left:10px;right:10px;top:54px;bottom:78px;display:none;overflow:auto;background:linear-gradient(#2b4f80,#16294a);border:3px solid #ffb800;border-radius:20px;padding:16px;box-shadow:0 6px 0 #a86f00;animation:aqIn .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes aqIn{from{transform:scale(.8);opacity:0}}
.aq-panel h3{margin:0 0 12px;text-align:center;font-size:24px;color:#ffd23f;-webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000}
.aq-panel .note{text-align:center;font-size:13px;opacity:.85}
.aq-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:#e20303;color:#fff;font-weight:900;box-shadow:0 3px 0 #6a0000;cursor:pointer}
.item{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:14px;padding:10px;margin-bottom:10px}
.ii{font-size:38px}.it{flex:1}.it b{display:block;font-size:16px}.it small{font-size:12px;opacity:.85}
.chests{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chest{background:rgba(0,0,0,.25);border-radius:14px;padding:12px;text-align:center}
.chest .ci{font-size:44px;animation:aqBob 1.4s infinite}.chest b{display:block;font-size:13px;margin:6px 0 8px}
.chest.plata{background:linear-gradient(#9fb3c8,#5b7290)}.chest.empty{opacity:.45}.chest.empty .ci{animation:none}
.skins{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.skin{background:rgba(0,0,0,.25);border-radius:14px;padding:8px;text-align:center;border:3px solid transparent}
.skin.sel{border-color:#7dff5a}.skin img{width:100%;aspect-ratio:1;object-fit:contain;background:radial-gradient(#5aa9ff,#1e3d6b);border-radius:10px}
.skin b{display:block;margin:6px 0}
.lb .row{display:flex;justify-content:space-between;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 12px;margin-bottom:6px;font-size:15px}
.aq-match,.aq-result,.aq-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#2b4f80,#0f1d33);z-index:5;text-align:center;padding:16px}
.aq-match .globe{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#7dff5a,#1fae00 60%,#0d5a00);box-shadow:0 0 40px #7dff5a;animation:aqSpin 1.2s linear infinite;position:relative;overflow:hidden}
.aq-match .globe:after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(255,255,255,.6) 0 40deg,transparent 40deg)}
@keyframes aqSpin{to{transform:rotate(360deg)}}
.aq-match p{font-size:22px;margin-top:20px;text-shadow:0 2px 0 #000}
.aq-match .vs{display:flex;align-items:center;gap:10px;width:100%;animation:aqIn .4s}
.aq-match .vs>div{flex:1;background:rgba(0,0,0,.35);border:3px solid #ffb800;border-radius:16px;padding:14px 6px}
.aq-match .vs b{display:block;font-size:16px;margin-bottom:8px;word-break:break-all}.aq-match .vs span{display:block;font-size:15px;margin:3px 0}
.aq-match .vs i{font-style:normal;font-size:40px;color:#ffd23f;-webkit-text-stroke:2px #000}
.aq-result{background:rgba(0,0,0,.65)}
.aq-result .card{width:100%;background:linear-gradient(#2b4f80,#16294a);border:4px solid #ffb800;border-radius:22px;padding:22px;box-shadow:0 8px 0 #a86f00;animation:aqIn .4s cubic-bezier(.3,1.6,.5,1)}
.aq-result h2{margin:0 0 14px;font-size:44px;color:#ffd23f;-webkit-text-stroke:2px #000;text-shadow:0 5px 0 #000}
.aq-result.lose h2{color:#ff4a3a}
.aq-result .rw{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.aq-result .rw span{background:rgba(0,0,0,.3);border-radius:12px;padding:8px 12px;font-size:20px}
.aq-result .bigchest{font-size:90px;animation:aqBob 1s infinite}
.aq-loading .aq-title{position:static}
.aq-lbar{width:70%;height:16px;margin-top:24px;background:rgba(0,0,0,.4);border:3px solid #fff;border-radius:10px;overflow:hidden}
.aq-lbar i{display:block;height:100%;width:5%;background:linear-gradient(#ffe066,#f0a400);transition:width .2s}
/* v2: mecánica mira + esconderse */
.aq-tag{position:absolute;top:58px;left:50%;transform:translateX(-50%) scale(.6);opacity:0;background:rgba(20,30,50,.8);border:2px solid rgba(255,255,255,.5);border-radius:10px;padding:7px 16px;font-size:15px;letter-spacing:1px;white-space:nowrap;transition:.25s}
.aq-tag.on{opacity:1;transform:translateX(-50%) scale(1)}
.aq-tag.en{background:rgba(120,0,0,.85);border-color:#ff7a6a}
.aq-tag.me{background:rgba(160,110,0,.9);border-color:#ffe066}
.aq-count{top:22%}
.aq-badge{position:absolute;top:16%;left:50%;transform:translate(-50%,0) scale(.3);opacity:0;text-align:center;transition:transform .3s cubic-bezier(.3,1.8,.5,1),opacity .2s}
.aq-badge.on{opacity:1;transform:translate(-50%,0) scale(1)}
.aq-badge .b-ico{width:84px;height:84px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:46px;background:#fff;border:6px solid #e2345f;transform:rotate(45deg);border-radius:14px}
.aq-badge .b-ico{line-height:1}
.aq-badge b{display:block;margin-top:14px;font-size:26px;color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 4px 0 #000}
.aq-badge.head b{color:#ff4a6a}
.aq-badge span{display:block;font-size:40px;color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 4px 0 #000}
.aq-scope{position:absolute;inset:0;display:none;background:radial-gradient(circle at center,transparent 0,transparent min(42vw,34%),rgba(0,0,0,.7) calc(min(42vw,34%) + 3px),#000 calc(min(42vw,34%) + 14px))}
.aq-scope:before,.aq-scope:after{content:"";position:absolute;background:#000}
.aq-scope:before{left:50%;top:18%;bottom:18%;width:2px;margin-left:-1px}
.aq-scope:after{top:50%;left:6%;right:6%;height:2px;margin-top:-1px}
.aq-scope i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#ff1a1a;box-shadow:0 0 8px #f00;z-index:2}
.aq-quiver{right:auto;left:12px;bottom:auto;top:62px}
.aq-quiver.foe{left:auto;right:12px}
.aq-quiver i{width:10px;height:34px}
.aq-hand{position:absolute;left:50%;bottom:16%;font-size:54px;display:none;animation:aqSwipe 1.4s ease-in-out infinite}
@keyframes aqSwipe{0%,100%{transform:translateX(-120%)}50%{transform:translateX(40%)}}
.aq-hitfx{position:absolute;inset:0;box-shadow:inset 0 0 120px 40px rgba(220,0,0,0);transition:box-shadow .3s}
.aq-hitfx.on{box-shadow:inset 0 0 120px 50px rgba(220,0,0,.85);transition:none}
.aq-pop.coin{color:#7dff5a;font-size:20px}
.aq-match .st{font-size:22px;margin-bottom:16px}
.aq-hint{bottom:12%}
/* v3: posturas, mira enemiga, mundos */
.aq-stance{position:absolute;right:10px;bottom:90px;display:none;flex-direction:column;gap:8px;z-index:3}
.aq-stance button{width:70px;border:0;border-radius:16px;padding:8px 4px;font:900 26px/1 inherit;color:#fff;cursor:pointer;background:linear-gradient(#5aa9ff,#1e5fc4);box-shadow:0 5px 0 #0d2f66;touch-action:none}
.aq-stance button span{display:block;font-size:10px;margin-top:4px}
.aq-stance button.on{background:linear-gradient(#ffe066,#f0a400);box-shadow:0 5px 0 #8a5a00;transform:translateY(2px)}
.aq-seen{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;padding:8px 16px;border-radius:14px;font-size:16px;white-space:nowrap;text-shadow:0 2px 0 #000}
.aq-seen.on{display:block}.aq-seen.vis{background:rgba(200,0,0,.8);animation:aqBlink .5s infinite}.aq-seen.hid{background:rgba(0,120,40,.8)}
.aq-world{position:absolute;right:10px;top:100px;display:none;background:rgba(0,0,0,.45);border-radius:10px;padding:4px 10px;font-size:12px}
.aq-world.on{display:block}
.aq-dot{position:absolute;width:44px;height:44px;margin:-22px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 6px rgba(255,255,255,.3);display:none;pointer-events:none}
.aq-zones{position:absolute;right:6px;top:30%;bottom:6%;display:none;flex-direction:column;justify-content:space-between;font-size:11px;opacity:.75;text-align:right;pointer-events:none}
.aq-zones span{background:rgba(0,0,0,.35);padding:3px 6px;border-radius:8px}
.aq-danger{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 90px 30px rgba(255,0,0,.75);transition:opacity .15s;pointer-events:none}