/* Dunquest · estilos de la página (ventanas, HUD, menús…) */ :root{ --bg:#14101a;--panel:#2a2236;--panel2:#3a2f4a;--inset:#1c1624;--edge:#c9a24a;--edge-d:#6e5522; --text:#f4ecda;--muted:#b9ad95;--hp:#d64545;--mana:#3f7fd6;--fury:#e0822b;--xp:#e6c64a; --ui:'Rubik',system-ui,'Segoe UI',Arial,sans-serif;--title:'Pixelify Sans','Rubik',system-ui,sans-serif; box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px); } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#14101a}} :root[data-theme="dark"]{--bg:#14101a} *{box-sizing:border-box} html{scroll-padding-top:env(safe-area-inset-top,0px)} html,body{height:100%;margin:0} input{user-select:text;-webkit-user-select:text} body{background:var(--bg);color:var(--text);font-family:var(--ui);font-variant-numeric:tabular-nums;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} canvas#game{position:fixed;inset:0;display:block;cursor:crosshair} /* los recuadros de la interfaz llevan el mismo marco fino que los botones (las ventanas, más abajo, el grueso) */ .frame{background:linear-gradient(180deg,#322944 0%,#261f33 100%);background-clip:padding-box!important;border:2px solid #0d0a11;border-image:var(--marco-b) 5 / 10px stretch;box-shadow:inset 0 6px 0 4px #ffffff08,0 6px 14px #0008;border-radius:0} /* el borde de los botones es un marco fino de pixel art (marcoFinoSVG en js/sprites.js): se pinta 10 px hacia dentro desde el borde, sin cambiar el tamaño del botón */ .btn{font:500 14px var(--ui);color:var(--text);background:var(--panel);background-clip:padding-box!important;border:2px solid #0d0a11;border-image:var(--marco-b) 5 / 10px stretch;box-shadow:inset 0 -3px 0 #0005;padding:8px 11px;cursor:pointer;line-height:1} .btn:hover{border-image-source:var(--marco-b-on)} /* lo elegido entre varios botones (pestañas, páginas de la bolsa y del almacén, cantidad del joyero, pestañas y modos de PvP…): fondo dorado apagado, letra clara y el marco con el oro vivo; lo no elegido se queda en morado. Los interruptores de Opciones (Sí / No) van igual, pero en verde */ .btn.on{background-color:#5a4420;color:#fff3c8;border-image-source:var(--marco-b-on)} .btn.on:hover{background-color:#6a5228} .btn.on kbd{color:#ffe9a8} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn:focus-visible,.slot:focus-visible,.sk:focus-visible{outline:2px solid var(--xp);outline-offset:2px} kbd{font:500 11px var(--ui);color:var(--xp);margin-left:5px} body.touch kbd{display:none} .coin{display:inline-flex;align-items:center;gap:3px} .money{display:inline-flex;gap:10px;align-items:center} .coin img{width:14px;height:14px;image-rendering:pixelated} #plate{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);width:240px;padding:10px 12px 10px;z-index:5} .plate-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px} .plate-head #h-cls{font:700 19px var(--title)} #h-lvl{font:700 16px var(--ui);color:var(--xp)} .bar{position:relative;height:17px;background:var(--inset);border:2px solid #0d0a11;margin-top:4px} .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--hp);box-shadow:inset 0 3px 0 #ffffff35,inset 0 -3px 0 #00000030} .bar.res i{background:var(--mana)} .bar.res.fury i{background:var(--fury)} .bar.xp{height:8px}.bar.xp i{background:var(--xp)} .bar span{position:absolute;inset:0;font:500 12px/13px var(--ui);text-align:center;text-shadow:1px 1px 0 #000,-1px 0 0 #000} .bar.xp span{display:none} .plate-foot{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font:500 13px var(--ui);color:var(--muted)} .plate-foot .money{display:flex;gap:10px;color:var(--text)} #menu{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);display:flex;gap:6px;z-index:5;flex-wrap:wrap;justify-content:flex-end;max-width:60vw} #banner{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 74px);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s;z-index:4} #banner b{display:block;font:700 34px var(--title);text-shadow:3px 3px 0 #000} #banner small{font:500 16px var(--ui);color:var(--xp);text-shadow:1px 1px 0 #000} #toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 150px);padding:9px 15px;font:500 15px var(--ui);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;z-index:30} #log{position:fixed;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 216px);display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none;z-index:4} #log div{font:500 14px var(--ui);background:#000a;padding:4px 9px;transition:opacity .6s;text-shadow:1px 1px 0 #000} body.touch #log{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 190px)} #tip{position:fixed;left:0;top:0;z-index:40;pointer-events:none;display:none;width:280px;padding:10px 12px 11px} #tip h3{margin:0 0 3px;font:700 16px var(--ui)} #ghost{position:fixed;z-index:45;width:48px;height:48px;image-rendering:pixelated;pointer-events:none;display:none;filter:drop-shadow(0 4px 0 #0008)} .slot{touch-action:none} .slot.can{box-shadow:inset 0 0 0 2px #7de07a66} .slot.bloq{opacity:.45} .slot.dropok{outline:2px solid #7de07a;outline-offset:-2px} .slot.dropno{outline:2px solid #ff6a5a;outline-offset:-2px} .slot:hover{box-shadow:inset 0 0 0 2px #5a4f70} #minimap{position:fixed;top:calc(env(safe-area-inset-top,0px) + 58px);right:calc(env(safe-area-inset-right,0px) + 10px);z-index:5;padding:5px;cursor:pointer} #minimap canvas{display:block;width:210px;height:126px;image-rendering:pixelated} #minimap .mm-name{font:500 12px var(--ui);color:var(--muted);text-align:center;margin-top:3px} body.touch #minimap canvas{width:150px;height:90px} #minimap.big canvas{width:420px;height:252px} body.touch #minimap.big canvas{width:300px;height:180px} /* la barra de menú ocupa dos filas en ventanas estrechas: el minimapa va siempre por debajo de ella (--menu-b: dónde acaba la barra; lo pone interfaz.js). En las partidas de PvP va abajo y esto no le afecta */ body:not(.touch) #minimap{top:max(calc(env(safe-area-inset-top,0px) + 58px),calc(var(--menu-b,0px) + 8px))} /* el minimapa de los mapas con forma: sin recuadro; solo la silueta del mapa (la recorta el propio lienzo), el botón del mapa del mundo en su sitio y el nombre debajo. Lo de alrededor deja pasar los clics al juego */ #minimap.forma{background:none;border-color:transparent;border-image:none;box-shadow:none;pointer-events:none} #minimap.forma canvas,#minimap.forma #mm-world{pointer-events:auto} #minimap.forma .mm-name{font-weight:600;color:var(--text);text-shadow:1px 0 0 #0d0a11,-1px 0 0 #0d0a11,0 1px 0 #0d0a11,0 -1px 0 #0d0a11,1px 1px 0 #0d0a11,-1px -1px 0 #0d0a11,1px -1px 0 #0d0a11,-1px 1px 0 #0d0a11} #target{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);width:260px;padding:8px 12px 10px;z-index:5;display:none;text-align:center} #target .tn{font:700 15px var(--ui)} #target .tl{font:500 12px var(--ui);color:var(--muted);margin-left:6px} #target .bar{height:15px} body.touch #target{width:200px;top:calc(env(safe-area-inset-top,0px) + 60px)} /* los efectos de un enemigo junto a su barra de vida (2026-10-18): como los tuyos, pero más pequeños; icono con su reloj y los segundos que quedan, en rojo lo que le perjudica a él */ .efes{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:6px}.efes:empty{display:none} .efes .buff{width:24px}.efes .buff .bi{width:24px;height:24px}.efes .buff span{font-size:10px;margin-top:1px;min-height:11px} /* la barra del jefe (2026-10-18): arriba, debajo de los botones, quieta mientras estás en su sala; en claro, lo que acaba de perder, que baja detrás. Los clics pasan al mapa salvo en sus efectos */ #jefe{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 52px);width:min(540px,46vw);padding:2px 14px 6px;z-index:5;display:none;text-align:center;pointer-events:none} #jefe .jn{font:700 17px var(--ui);color:#ffb070}#jefe .jl{font:500 12px var(--ui);color:var(--muted);margin-left:8px} #jefe .bar{height:20px}#jefe .bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:#f4d8a8}#jefe .bar i{background:#ff8a2a}#jefe .bar span{font:700 13px/16px var(--ui)} #regen{font:500 12px var(--ui);color:#7de07a;display:none} body.side .win{background:none;padding:0;inset:auto;display:none} body.side .win.open{display:block} body.side #win-inv{right:10px;top:calc(env(safe-area-inset-top,0px) + 58px);width:392px} /* tan alto como lo que lleva: en pantallas altas ya no queda una zona vacía al final */ body.side #win-inv .box{width:100%;height:auto;max-height:calc(100vh - env(safe-area-inset-top,0px) - 78px);padding:12px 12px 14px} body.side #win-inv .box header{margin-bottom:8px} body.side #win-inv h2{font-size:20px} body.side .inv-grid{grid-template-columns:1fr;gap:10px} body.side .equip{grid-template-columns:46px minmax(0,1fr) 46px;gap:5px} body.side .eq-col{grid-template-rows:repeat(5,46px);gap:5px} body.side .eq-mid{grid-template-rows:minmax(0,1fr) 46px;gap:5px} body.side #win-inv .equip .slot{width:46px;height:46px} body.side #pv-name{font-size:12px} body.side .bag{gap:3px} body.side .bag-head{margin-top:10px;font-size:13px} body.side #detail{display:none} body.side #win-shop,body.side #win-sto,body.side #win-craft,body.side #win-jw,body.side #win-casino{left:10px;bottom:20px;width:540px;max-height:64vh} body.side #win-shop .box,body.side #win-sto .box,body.side #win-craft .box,body.side #win-jw .box,body.side #win-casino .box{width:100%;max-height:64vh;padding:12px 14px 14px} body.side .win .box h2{font-size:20px} body.side .sto-bagwrap,body.side .cr-bagwrap{display:none} body.side #win-opt,body.side #win-cf,body.side #win-q,body.side #win-enc,body.side #win-int{inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px} body.side #win-opt.open,body.side #win-cf.open,body.side #win-q.open,body.side #win-enc.open,body.side #win-int.open{display:flex} #xpbar{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:24px;z-index:4;pointer-events:none} #xpbar canvas{position:absolute;left:0;bottom:0;image-rendering:pixelated} #xp-t{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font:700 14px/21px var(--ui);color:#fff;white-space:nowrap;text-shadow:-1px -1px 0 #0d0a11,1px -1px 0 #0d0a11,-1px 1px 0 #0d0a11,1px 1px 0 #0d0a11,0 -1px 0 #0d0a11,0 1px 0 #0d0a11,-1px 0 0 #0d0a11,1px 0 0 #0d0a11;pointer-events:auto;cursor:default} #xp-t b{color:#ffe14a;margin-right:6px} #xpt{display:none} #skills{bottom:calc(env(safe-area-inset-bottom,0px) + 27px)!important} body:not(.touch) #skills{bottom:calc(env(safe-area-inset-bottom,0px) + 21px)!important} #plate .bar.xp{display:none} .pill{display:inline-block;padding:1px 7px;border-radius:9px;background:#0006;border:1px solid #ffffff22;margin-left:4px} #portrait{width:34px;height:34px;image-rendering:pixelated;background:#15101c;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px var(--edge-d);border-radius:3px;margin-right:8px;vertical-align:middle} .plate-head{align-items:center!important} .plate-head .ph-l{display:flex;align-items:center;min-width:0} #h-lvl{margin-left:8px;white-space:nowrap;font-size:14px!important} .plate-head #h-cls{font-size:17px!important} .grid8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px} .grid8 .slot{width:auto;height:auto;aspect-ratio:1} .grid8 .slot.sel{outline:2px solid #fff3c8;outline-offset:-6px} .craft-top{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center} .craft-in{display:grid;grid-template-columns:repeat(4,56px);gap:6px} #win-jw .jw-box{width:min(560px,100%)} body.side #win-jw{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 164px)} .jw-sc{position:relative}.jw-sc img{width:68%;height:68%;image-rendering:pixelated;pointer-events:none}.jw-sc b{position:absolute;right:-4px;bottom:-5px;font:800 10px var(--ui);color:#fff;background:#0d0a11;border:1px solid var(--g,#3a2f48);padding:0 3px;line-height:14px} .jw-sc.gem{background:radial-gradient(circle at 50% 40%,#2a2036,#0d0a11)!important;border-color:var(--g)!important} .nm-btn{color:#ff9a7a;box-shadow:inset 0 0 0 1px #c03a2a}.nm-btn:disabled{opacity:.45} .jw-tabs{display:flex;gap:4px;margin:0 0 10px} .jw-tab{flex:1;padding:7px 6px;font:600 13px var(--ui);color:var(--muted);background:#15101c;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #3a2f48;cursor:pointer} .jw-tab.on{color:#fff3c8;background:#5a4420;box-shadow:inset 0 0 0 2px var(--xp)} .jw-top{display:flex;gap:12px;align-items:center} .jw-drop{width:70px;height:70px;flex:none;display:grid;place-items:center;background:var(--inset);border:2px dashed #5a4a70;cursor:pointer;padding:0;color:var(--muted);font:600 10px var(--ui);text-align:center} .jw-drop.full{border-style:solid}.jw-drop img{width:76%;height:76%;image-rendering:pixelated;pointer-events:none} .jw-info{min-width:0}.jw-info h3{margin:0 0 2px;font:700 15px var(--ui)}.jw-info .sub{font-size:12px} .jw-socks{display:flex;gap:12px;justify-content:center;margin:12px 0 2px} .jw-sk{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10.5px var(--ui);color:var(--muted);min-width:58px} .jw-sk .money{font-size:10.5px} .jw-sc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:3px solid #0d0a11;box-shadow:inset 0 0 0 2px #3a2f48;background:#15101c;color:#fff;font:800 14px var(--ui);cursor:pointer;padding:0;text-shadow:0 1px 0 #000} .jw-sc.empty{border:3px dashed #6a5a80;color:#8a7aa0;box-shadow:none} .jw-sc.lock{background:#0d0a11;cursor:default;color:#5a5068;font-size:16px} .jw-sc.lock.can{cursor:pointer;box-shadow:inset 0 0 0 2px var(--xp);color:var(--xp)} .jw-sc.gem{box-shadow:inset 0 -7px 0 rgba(0,0,0,.28),inset 0 6px 0 rgba(255,255,255,.35),0 0 10px var(--g)} .jw-sc.dropok,.jw-drop.dropok{border-color:#7de07a!important;box-shadow:0 0 12px #7de07a} .jw-sl{font:600 11px var(--ui);color:var(--muted);margin:8px 0 3px} .jw-strip{display:flex;gap:4px;overflow-x:auto;padding-bottom:3px;min-height:46px} .jw-strip .slot{width:44px;height:44px;flex:none} .jw-pol{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 4px} .jw-arrow{font:800 22px var(--ui);color:var(--xp)} .jw-res{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 2px;font:600 12px var(--ui);color:var(--muted);flex-wrap:wrap} .jw-hint{font:400 11.5px var(--ui);color:var(--muted);margin:6px 0 0;text-align:center} .jw-q{display:flex;gap:4px;align-items:center;margin-bottom:8px;font:600 12px var(--ui);color:var(--muted)} .jw-q button{padding:3px 10px;font:600 12px var(--ui)} .jw-shop{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:4px 6px;align-items:center} .jw-shop .gh{font:700 12px var(--ui);color:var(--muted);text-align:center} .jw-gn{display:flex;align-items:center;gap:6px;font:600 12px var(--ui);min-width:0}.jw-gn img{width:24px;height:24px;image-rendering:pixelated;flex:none}.jw-gn small{display:block;font-weight:400;color:var(--muted);font-size:10.5px} .jw-shop2{display:grid;grid-template-columns:repeat(5,46px);gap:6px;justify-content:center} .jw-gt{width:46px;height:46px;position:relative;box-shadow:inset 0 0 0 2px #2c2438,0 0 6px color-mix(in srgb,var(--g) 35%,transparent)}.jw-gt:hover{box-shadow:inset 0 0 0 2px var(--g)}.jw-gt.poor{opacity:.45}.jw-gt b{position:absolute;right:-3px;bottom:-4px;font:800 10px var(--ui);color:#fff;background:#0d0a11;border:1px solid var(--g);padding:0 3px;line-height:14px} .jw-bb{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;font:600 11px var(--ui)}.jw-bb .money{font-size:11px} @media (max-width:700px){.craft-top{grid-template-columns:1fr}} .sock-row{display:flex;gap:8px;margin:10px 0} .sock{width:40px;height:40px;border:2px solid #0d0a11;background:#120e18;color:#fff;font:700 13px var(--ui);cursor:pointer;box-shadow:inset 0 0 0 2px #3a3050;text-shadow:1px 1px 0 #000} .sock.on{outline:2px solid var(--xp);outline-offset:1px} .box.q-box{width:min(560px,100%)} #q-body p{font:400 15px/1.55 var(--ui);margin:0 0 10px} #tracker{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 166px);width:240px;padding:9px 12px;z-index:5;font:400 13px/1.4 var(--ui)} #tracker b{font:700 14px var(--ui);color:#ffe14a;display:block;margin-bottom:2px} #tracker .w{color:var(--muted)} #tracker .ok{color:#7de07a} #tracker .hint{color:#ffe14a;margin-top:3px} #buff{font:600 12px var(--ui);color:#ffb070;display:none} .bfx{font:600 12px var(--ui);color:#c8d0dc;display:none} body.touch #tracker{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 170px);width:200px;font-size:12px} #tracker{padding:0;cursor:pointer} #tracker .th{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 11px;font:600 13px var(--ui);color:#ffe14a;background:none;border:0;width:100%;text-align:left;cursor:pointer} #tracker .th span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #tracker .tb{padding:0 11px 9px;display:none} #tracker.open .tb{display:block} #m-more{display:none} body.touch #m-more{display:inline-block;font-size:20px;padding:6px 12px} body.touch #menu{flex-direction:column;align-items:flex-end;flex-wrap:nowrap;z-index:12} body.touch #menu .btn:not(#m-more){display:none} body.touch #m-help{display:none!important} body.touch #menu.open .btn:not(#m-more){display:block;min-width:150px;text-align:left;font-size:16px;padding:11px 14px} #act-pop{position:fixed;z-index:42;display:none;padding:9px 10px;min-width:200px;width:270px;max-width:calc(100vw - 12px);max-height:80vh;overflow:auto} #act-pop .stats{margin:0 4px 6px} #act-pop .stats h3{display:none} #act-pop .an{font:700 14px var(--ui);margin:2px 4px 6px} #act-pop .btn{display:block;width:100%;text-align:left;margin-top:5px;font-size:15px;padding:10px 12px} @media (max-width:520px){#plate{width:190px;padding:8px 10px}.plate-head #h-cls{font-size:16px}body.touch #minimap canvas{width:110px;height:66px}body.touch #target{top:calc(env(safe-area-inset-top,0px) + 170px);width:180px}body.touch #tracker{width:170px}} .opt-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid #ffffff14;font:400 15px var(--ui)} .opt-row:last-child{border-bottom:0} .toggle{min-width:74px} .btn.toggle.on{background-color:#2f4a2c;color:#c9f7bb} .btn.toggle.on:hover{background-color:#38573a} input[type=range]{width:160px;accent-color:#c9a24a} .box.opt-box{width:min(480px,100%)} .bag-tools{display:flex;gap:8px;align-items:center} .bag-tools .btn{font-size:12px;padding:5px 8px} #skills{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;gap:8px;padding:9px;z-index:5} .sk{position:relative;width:60px;height:60px;font-size:27px;display:grid;place-items:center;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px var(--edge-d);cursor:pointer;color:var(--text);padding:0;font-family:inherit;overflow:hidden;touch-action:none} /* recarga como un reloj: .cd es una copia en gris del icono que tapa la parte que falta; --e es la fracción ya recargada (de 0 a 1) y .cdh, la aguja */ .sk .cd{position:absolute;inset:0;display:none;place-items:center;line-height:1;pointer-events:none;filter:grayscale(1) brightness(.6);-webkit-mask-image:conic-gradient(transparent 0 calc(var(--e,1)*1turn),#000 0);mask-image:conic-gradient(transparent 0 calc(var(--e,1)*1turn),#000 0)} .sk.oncd .cd{display:grid} .sk .cd img{display:block;width:1.55em;height:1.55em;image-rendering:pixelated} .sk .cdh{position:absolute;left:calc(50% - 1px);bottom:50%;width:2px;height:37%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);transform-origin:50% 100%;transform:rotate(calc(var(--e,1)*1turn));pointer-events:none;display:none;z-index:1} .sk.oncd .cdh{display:block} .sk .cdh::after{content:'';position:absolute;left:-2px;bottom:-3px;width:6px;height:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)} /* el eje, en el centro del icono */ .sk .cd.lin{display:block;filter:none;-webkit-mask-image:none;mask-image:none} /* la esencia de guerra no tiene recarga: su franja se tiñe entera mientras hay una colocada */ #skills .sk.vacia .ic{opacity:.28;filter:grayscale(1)} /* la casilla R sin esencia colocada */ #skills .sk.dropok{outline:2px solid #7de07a;outline-offset:-2px} /* al arrastrar una esencia de guerra sobre su casilla */ #skills .sk.can{box-shadow:inset 0 0 0 2px #7de07a66} /* la casilla donde se puede soltar lo que se está arrastrando */ body.eli-arrastre #skills{z-index:30} /* mientras se arrastra una esencia de guerra, la barra pasa por encima de las ventanas: su casilla R se ve y se puede soltar en ella aunque la bolsa la tape */ body.eli-arrastre #skills .orb{visibility:hidden} /* ...pero las bolas de vida y maná, que van dentro de la barra, no: tapaban las ventanas abiertas. Vuelven al soltar */ body.touch .sk{background:radial-gradient(circle at 50% 35%,#2c2438,#15101c)!important} body.touch .sk.nores{box-shadow:inset 0 0 0 2px #7a2a2a!important} .sk:hover{box-shadow:inset 0 0 0 2px var(--edge)} .sk .cdt{position:absolute;inset:0;display:grid;place-items:center;font:700 19px var(--ui);text-shadow:1px 1px 0 #000,-1px -1px 0 #000;pointer-events:none} .sk kbd{position:absolute;left:4px;top:3px;margin:0;font-size:12px;font-weight:700} .sk .cost{position:absolute;right:4px;bottom:2px;font:700 12px var(--ui);color:#a9ccff;pointer-events:none;text-shadow:1px 1px 0 #000} .sk.fury .cost{color:#ffb070} .sk .ic{pointer-events:none;line-height:1} .sk .ic img,.sb img,.skic img{display:block;width:74%;height:74%;margin:auto;image-rendering:pixelated;pointer-events:none} .sk .ic img{width:1.55em;height:1.55em} #skghost img{width:44px;height:44px;image-rendering:pixelated} #tip .tt-ic{width:26px;height:26px;image-rendering:pixelated;vertical-align:-6px;margin-right:6px} .sk-box{width:min(700px,100%)} .sk-hb{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .sk-barrow{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap} .sk-lbl{font:700 13px var(--ui);color:#e8d9a8} #sk-bar{display:flex;gap:5px;flex-wrap:wrap} .sb{position:relative;width:46px;height:46px;display:grid;place-items:center;font-size:22px;background:radial-gradient(circle at 50% 35%,#24343a,#0c1418);border:2px solid #06090b;box-shadow:inset 0 0 0 2px #6e5522;cursor:pointer;color:var(--text);padding:0;touch-action:none;font-family:inherit} .sb kbd{position:absolute;left:3px;top:2px;margin:0;font-size:9px;font-weight:700;pointer-events:none} .sb.sel,.skic.sel{box-shadow:inset 0 0 0 2px #ffd27a,0 0 12px #ffd27a99} .sb.tgt{box-shadow:inset 0 0 0 2px #7de07a} .sk-main{display:flex;gap:10px;align-items:stretch} .sk-tube{position:relative;width:26px;flex:none;border-radius:13px;background:linear-gradient(90deg,#0a1216,#1a262c 50%,#0a1216);border:2px solid #06090b;box-shadow:inset 0 0 0 1px #3a4a4e;overflow:hidden;min-height:200px} .sk-tube i{position:absolute;left:3px;right:3px;bottom:26px;border-radius:9px;background:linear-gradient(90deg,#1f7f9a,#7fe0f4 45%,#2a9ab8);box-shadow:0 0 8px #5fd0ee88;transition:height .3s} .sk-tube b{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:700 13px var(--ui);color:#e8f6ff} .sk-panel{flex:1;min-width:0;background:linear-gradient(180deg,#0f3440,#0a1c24);border:2px solid #06090b;box-shadow:inset 0 0 0 1px #2e5a64;padding:8px 10px 10px} .sk-pts{font:600 13px var(--ui);color:#cfe6ea;margin:0 0 8px}.sk-pts b{color:#7fe0f4} #sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px} .skc{background:linear-gradient(180deg,#1b2a30,#0e161a);border:1px solid #06090b;box-shadow:inset 0 0 0 1px #3a4a4e,inset 0 1px 0 #ffffff14;padding:5px 7px 7px;border-radius:3px} .skc-name{font:600 11.5px var(--ui);color:#e8d9a8;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .skc-row{display:flex;align-items:center;gap:7px} .skic{position:relative;width:44px;height:44px;font-size:24px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3a3020,#140f08);border:2px solid #06090b;box-shadow:inset 0 0 0 2px #a07a2a;cursor:grab;touch-action:none;flex:none;user-select:none} .skic .lk{position:absolute;right:-3px;bottom:-4px;font:700 9px var(--ui);background:#0a0d0e;color:#cfd6d8;padding:1px 3px;border:1px solid #3a4a4e;pointer-events:none} .skc.locked .skic{cursor:not-allowed;filter:grayscale(1) brightness(.6)}.skc.locked .skc-name{color:#8a8a80} .nodes{display:flex;gap:5px} .nd{width:27px;height:27px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5a6468,#1e2427);border:2px solid #06090b;box-shadow:inset 0 0 0 1px #8a969a55;color:#cfd6d8;font:700 11px var(--ui);display:grid;place-items:center;padding:0;cursor:default} .nd.done{background:radial-gradient(circle at 40% 35%,#ffe9a0,#b8862a);color:#1a1208;box-shadow:inset 0 0 0 1px #fff3c855} .nd.can{cursor:pointer;box-shadow:0 0 0 2px #e6c64a,0 0 9px #e6c64aaa;color:#fff3c8} .nd.off{opacity:.45} .sk-hint{font:400 12px var(--ui);color:var(--muted);margin:10px 0 0} #tip .tt-sub{font:600 12px var(--ui);color:var(--muted);margin-bottom:5px} #tip .tt-d{font:400 13px/1.35 var(--ui);color:var(--text)} #tip .tt-up{font:500 12px/1.3 var(--ui);color:#8a8070;margin-top:3px}#tip .tt-up.on{color:#e6c64a} #tip .tt-st{margin-top:7px;font:600 12px var(--ui)} #mm-world{position:absolute;left:9px;top:9px;width:24px;height:24px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:13px;line-height:1;background:radial-gradient(circle at 40% 35%,#3a3020,#140f08);border:2px solid #06090b;box-shadow:inset 0 0 0 1px #c9a24a;cursor:pointer;z-index:2} #mm-world:hover{box-shadow:inset 0 0 0 1px #ffe9a0,0 0 6px #e6c64a88} #win-wm .wm-box{width:min(96vw,calc((100vh - 196px) * 2.123 + 64px))} /* tan grande como quepa: casi todo el ancho, sin pasarse de alto */ #wm-svg{position:relative;line-height:0} .wm-pista{margin:0 0 8px;font:500 13px var(--ui);color:#9ff0e8} #wm-svg canvas{display:block;width:100%;height:auto;background:#14283a;border:2px solid #06090b;box-shadow:0 0 0 1px #c9a24a} .wm-aqui{position:absolute;width:0;height:0;pointer-events:none} .wm-aqui::before{content:'';position:absolute;left:-9px;top:-9px;width:14px;height:14px;border:2px solid #7de07a;box-shadow:0 0 0 2px #06090b,inset 0 0 0 2px #06090b;animation:wmPulse 1.2s ease-in-out infinite} .wm-aqui::after{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:#7de07a;box-shadow:0 0 0 2px #06090b} .wm-aqui span{position:absolute;left:0;bottom:14px;transform:translateX(-50%);white-space:nowrap;font:700 11px var(--ui);color:#7de07a;text-shadow:0 0 3px #000,0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;line-height:1} @keyframes wmPulse{50%{opacity:.35}} .wm-leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font:500 12px var(--ui);color:var(--muted)} .wm-leg i{display:inline-block;width:14px;height:10px;border:2px solid;margin-right:6px;vertical-align:-1px} body.side #win-wm{inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px} body.side #win-wm.open{display:flex} #skghost{position:fixed;z-index:60;pointer-events:none;font-size:30px;display:none;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 4px #000)} body.side #win-sk{left:10px;top:calc(env(safe-area-inset-top,0px) + 168px);width:630px} body.side #win-sk .box{width:100%;max-height:calc(100vh - 290px);padding:12px 14px 14px} body.touch #skills{background:none;border:0;box-shadow:none;left:auto;transform:none;right:calc(env(safe-area-inset-right,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);display:grid;grid-template-columns:repeat(5,56px) 84px;grid-template-areas:"s9 s8 s7 s6 s5 s3" "eli pot . s4 s2 s1";gap:8px;align-items:end;justify-items:center} body.touch .sk{width:56px;height:56px;border-radius:50%} body.touch .sk[data-s="0"]{grid-area:s1;width:84px;height:84px;font-size:34px} body.touch .sk[data-s="1"]{grid-area:s2}body.touch .sk[data-s="2"]{grid-area:s3}body.touch .sk[data-s="3"]{grid-area:s4}body.touch .sk[data-s="4"]{grid-area:s5} body.touch .sk[data-s="5"]{grid-area:s6}body.touch .sk[data-s="6"]{grid-area:s7}body.touch .sk[data-s="7"]{grid-area:s8}body.touch .sk[data-s="8"]{grid-area:s9} body.touch .sk[data-it="pot"]{grid-area:pot;width:46px;height:46px;font-size:20px} body.touch .sk[data-it="eli"]{grid-area:eli;width:46px;height:46px;font-size:20px} body.touch .sk[data-s="4"],body.touch .sk[data-s="5"],body.touch .sk[data-s="6"],body.touch .sk[data-s="7"],body.touch .sk[data-s="8"]{width:50px;height:50px;font-size:22px} body.touch .sk.empty{visibility:hidden} .sk.empty{opacity:.45}.sk.locked .ic{filter:grayscale(1) brightness(.45)} .sk[data-s="0"] kbd,.sk[data-s="1"] kbd{font-size:10px} body.touch .sk .cost{right:50%;transform:translateX(50%);bottom:4px} #skname{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 120px);padding:7px 11px;font:400 14px/1.35 var(--ui);display:none;z-index:6;pointer-events:none;max-width:340px;text-align:center} #talk{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 120px);display:none;z-index:6;font-size:16px;padding:11px 17px} body.touch #talk{bottom:calc(env(safe-area-inset-bottom,0px) + 170px)} #pick{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 150px);display:none;z-index:6;font-size:16px;padding:11px 17px} body.touch #pick{bottom:calc(env(safe-area-inset-bottom,0px) + 110px)} #joy{display:none;position:fixed;left:calc(env(safe-area-inset-left,0px) + 22px);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);width:136px;height:136px;border-radius:50%;background:#0005;border:2px solid #ffffff33;touch-action:none;z-index:5} body.touch #joy{display:block} #knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#ffffff33;border:2px solid #ffffff66;pointer-events:none} #help{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);padding:11px 13px;font:400 14px/1.55 var(--ui);z-index:5;max-width:260px} #help b{font:700 16px var(--title)} #help .x{position:absolute;right:7px;top:4px;background:none;border:0;color:var(--muted);font:500 20px var(--ui);cursor:pointer} body.touch #help{display:none} #death{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:#300a0a99;z-index:25;text-align:center;pointer-events:none} #death b{font:700 42px var(--title);text-shadow:3px 3px 0 #000} #death span{font:500 17px var(--ui);margin-top:6px} .win{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000a;z-index:20;padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px);touch-action:auto} .win.open{display:flex} .box{width:min(900px,100%);max-height:100%;overflow:auto;padding:16px 18px 18px;-webkit-overflow-scrolling:touch;touch-action:pan-y} .box header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px} .box h2{margin:0;font:700 26px var(--title)} .sub{color:var(--muted);font:400 14px/1.4 var(--ui)} .inv-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px} @media (max-width:700px){.inv-grid{grid-template-columns:1fr}} .equip{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:6px} .eq-col{display:grid;grid-template-rows:repeat(5,56px);gap:6px} .eq-mid{display:grid;grid-template-rows:minmax(0,1fr) 56px;gap:6px} .preview{position:relative;overflow:hidden;min-height:150px;background:radial-gradient(circle at 50% 58%,#3a3050,#1c1624 72%);border:2px solid #0d0a11} .preview canvas{position:absolute;left:0;top:0;image-rendering:pixelated} #pv-name{position:absolute;left:0;right:0;bottom:5px;text-align:center;font:500 14px var(--ui);color:var(--muted)} .eq-bottom{display:flex;justify-content:center;gap:34px} /* arma y escudo centrados, con un hueco entre medias */ .slot{width:56px;height:56px;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px #2c2438;position:relative;display:grid;place-items:center;cursor:pointer;padding:0;color:#7a7090;font:500 10px/1.05 var(--ui);text-align:center} .slot img{width:72%;height:72%;image-rendering:pixelated;pointer-events:none} .slot .q{position:absolute;right:3px;bottom:1px;font:700 12px var(--ui);color:var(--text);text-shadow:1px 1px 0 #000,-1px 0 0 #000;pointer-events:none} .slot .lv{position:absolute;left:3px;top:1px;font:700 10px var(--ui);color:var(--text);text-shadow:1px 1px 0 #000;pointer-events:none} .slot .candado{position:absolute;left:2px;bottom:2px;z-index:2;width:16px;height:18px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23d8d0e4%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23d8d0e4%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23d8d0e4%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23d8d0e4%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23d8d0e4%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23d8d0e4%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23fff0b0%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0b84a%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231b1420%22%2F%3E%3C%2Fsvg%3E") no-repeat;background-size:16px 18px} /* objeto protegido: candado de pixel art (8 x 9 cuadros), abajo a la izquierda (arriba va el nivel y abajo a la derecha, la cantidad) */ #detail .prot-txt,#tip .prot-txt{color:#e0b84a} .slot.sel{outline:2px solid #fff3c8;outline-offset:-6px} /* seleccionado: un cerco claro por dentro; el borde de fuera sigue siendo el color de la rareza (antes era dorado y lo tapaba) */ .slot.bad{background:#3a1616} /* los objetos únicos llevan un marco propio: contorno amarillo con un segundo filete de oro por dentro, con cuentas, y un nudo en cada esquina (marcoUnicoSVG en js/sprites.js) */ .slot.unico{border-image:var(--marco-unico) 5 / 10px round;box-shadow:inset 0 0 0 2px #2c2438,inset 0 0 12px #ffe14a2e} .slot.unico .lv{left:8px;top:6px} .slot.locked img{filter:brightness(.45) saturate(.6)} .slot.locked::after{content:'?';position:absolute;inset:0;display:grid;place-items:center;font:700 22px var(--ui);color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none} .ess{color:#c9b3ff} .bag{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:6px} .bag .slot{width:auto;height:auto;aspect-ratio:1} .bag-head{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font:500 14px var(--ui);color:var(--muted)} .side{display:flex;flex-direction:column;gap:10px} .card{background:var(--inset);border:2px solid #0d0a11;padding:10px 12px} .card h3{margin:0 0 3px;font:700 17px var(--ui)} .stl{display:flex;justify-content:space-between;gap:10px;font:400 14px/1.45 var(--ui)} .stl b{font-weight:700;color:#9fe08a;white-space:nowrap} .stl b.down{color:#ff7a6a} .stl.plain b{color:var(--text)} .req{font:500 13px var(--ui);margin-top:2px} .req.bad{color:#ff7a6a} .actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;align-items:center} .tabs .spacer{flex:1} .stepper{display:inline-flex;align-items:center;gap:6px;font:500 14px var(--ui)} .stepper b{min-width:28px;text-align:center;font-size:16px} .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px} .shop-grid.icons{grid-template-columns:repeat(auto-fill,52px);gap:6px} /* pestaña Vender: la bolsa de venta (se arrastra o se hace doble clic), el total, el botón y la casilla de confirmación */ .shop-grid.venta-tab{display:block} .venta{display:flex;flex-wrap:wrap;gap:6px;min-height:80px;padding:8px;background:var(--inset);border:2px dashed #6e5522;align-content:flex-start}.venta.vacia{align-items:center;justify-content:center;text-align:center}.venta.dropok{border-color:#7de07a;background:#1e2a1e}.venta .slot{width:52px;height:52px} .venta-pie{margin-top:8px}.venta-pie .actions{display:flex;gap:12px;align-items:center;margin-top:6px}.venta-conf{font:500 13px var(--ui);color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}.venta-conf input{accent-color:#c9a24a} #bag .slot.apuntado{border-color:#e6c64a!important} /* apuntado para vender: borde dorado y un velo dorado, sin cambiar el tamaño (la clase .venta es la zona de venta de la tienda) */ #bag .slot.apuntado::before{content:'';position:absolute;inset:0;background:#e6c64a2e;pointer-events:none} #bag .slot.multi,#sto-grid .slot.multi{outline:2px solid #d3e6fa;outline-offset:-2px} /* selección múltiple (recuadro con el botón derecho): cerco claro, velo azulado y una marca en la esquina (el borde de rareza no basta para distinguirlos) */ #bag .slot.multi::before,#sto-grid .slot.multi::before{content:'\2713';position:absolute;inset:0;z-index:1;display:flex;align-items:flex-start;justify-content:flex-end;padding:1px 4px 0 0;background:#9cc4ec38;color:#eef6ff;font:700 13px/15px var(--ui);text-shadow:1px 1px 0 #0d0a11,-1px 1px 0 #0d0a11,1px -1px 0 #0d0a11,-1px -1px 0 #0d0a11;pointer-events:none} #marco-sel{position:fixed;z-index:44;display:none;pointer-events:none;border:2px solid #d3e6fa;background:#9cc4ec2e;box-shadow:0 0 0 1px #0d0a11} /* el recuadro de selección */ #ghost-n{position:fixed;z-index:46;display:none;pointer-events:none;min-width:22px;padding:1px 4px;background:#22303f;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #8fb6e0;color:#dbe8f7;font:700 13px/15px var(--ui);text-align:center} .shop-ic{width:52px;height:52px}.shop-ic.poor{opacity:.45}.shop-ic:hover{box-shadow:inset 0 0 0 2px #e6c64a} .it{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:start} .it .ico{width:48px;height:48px;background:#120e18;border:2px solid #0d0a11;display:grid;place-items:center} .it .ico img{width:38px;height:38px;image-rendering:pixelated} .it .buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px} .it .btn{font-size:13px;padding:7px 10px} .qty{display:flex;gap:4px;align-items:center;margin-top:7px} .qty input{width:64px;font:600 14px var(--ui);color:var(--text);background:#120e18;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #3a3050;padding:5px 6px;text-align:center;-moz-appearance:textfield} .qty input::-webkit-inner-spin-button{-webkit-appearance:none} .qty .btn{padding:6px 9px;margin-top:0!important} @media (prefers-reduced-motion: reduce){#banner,#toast,#log div{transition:none}} /* ---- multijugador ---- */ #menu .btn.off{display:none!important} body:not(.touch) #m-chat{display:none!important} #m-net.net-off{opacity:.6} #chat{position:fixed;left:calc(env(safe-area-inset-left,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 216px);width:min(380px,calc(100vw - 24px));z-index:6;display:flex;flex-direction:column;gap:3px;pointer-events:none} #chat .msgs{display:flex;flex-direction:column;gap:3px} #chat .msgs div{font:500 14px var(--ui);background:#000a;padding:4px 9px;text-shadow:1px 1px 0 #000;transition:opacity .6s;overflow-wrap:anywhere} #chat.open .msgs div{opacity:1!important} #chat input{display:none;pointer-events:auto;font:500 14px var(--ui);color:var(--text);background:#120e18ee;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px var(--edge-d);padding:7px 9px;outline:none} #chat.open input{display:block} body.touch #chat{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 130px);width:min(300px,calc(100vw - 24px))} #net-name{width:170px;text-align:left} #net-list .stl{padding:5px 0;border-bottom:1px solid #ffffff14} #net-list .stl b{color:var(--muted);font-weight:500;white-space:normal;text-align:right} #net-help p{margin:6px 0} #net-help code{color:var(--xp);user-select:text;-webkit-user-select:text} body.side #win-net{inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px} body.side #win-net.open{display:flex} #chat .row{display:none;gap:4px;pointer-events:auto} #chat.open .row{display:flex} #chat .row input{flex:1;min-width:0;display:block} #chat-ch{padding:6px 8px;font:600 12px var(--ui);min-width:74px} #chat .msgs .ch{font-weight:600;margin-right:4px} #chat .msgs .cn{cursor:pointer} #chat.open .msgs .cn,#chat .msgs div:not(.gone) .cn{pointer-events:auto} #chat-menu{position:fixed;z-index:40;display:none;flex-direction:column;gap:4px;padding:8px;min-width:170px} #chat-menu.open{display:flex} #chat-menu b{font:700 13px var(--ui);color:#e8d9a8;margin:0 2px 2px} #chat-menu .btn{text-align:left;font-size:13px;padding:7px 10px} .net-sec{font:600 13px var(--ui);color:#e8d9a8;margin:12px 0 4px} .net-r{display:flex;align-items:center;gap:8px;justify-content:flex-end} .net-r .btn{padding:4px 8px;font-size:12px} #party{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 112px);display:flex;flex-direction:column;gap:6px;z-index:5;width:180px} #party .pm{padding:6px 9px 7px} #party .pn{display:flex;justify-content:space-between;gap:6px;font:600 13px var(--ui)} #party .pn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #party .pn small{color:var(--muted);font-weight:500;white-space:nowrap} #party .bar{height:10px;margin-top:4px} #party .bar i{background:#4ac06a} #party .pz{font:500 11px var(--ui);color:var(--muted);margin-top:3px} #party .pm.dead{opacity:.6} #party .pm{cursor:pointer} #party .pm:hover{border-image-source:var(--marco-b-on)} #party .pz{display:flex;justify-content:space-between;gap:6px} #party .pz em{font-style:normal;color:#cfd6e0} #party .ph{display:flex;align-items:center;gap:5px;padding:5px 6px 5px 9px} #party .ph b{flex:1;font:600 13px var(--ui);color:#e8d9a8;white-space:nowrap} #party .ph .btn{padding:4px 8px;font:600 12px var(--ui);margin:0} #party-menu{position:fixed;z-index:40;display:none;flex-direction:column;gap:4px;padding:8px;min-width:180px} #party-menu.open{display:flex} #party-menu b{font:700 13px var(--ui);color:#e8d9a8;margin:0 2px 2px} #party-menu .btn{text-align:left;font-size:13px;padding:7px 10px} /* ---- barra de habilidades: sin maná o furia suficiente, el icono queda en gris (y el coste, en rojo) ---- */ .sk .cost,.sk kbd,.sk .cdt{z-index:2} .sk.nores .ic{filter:grayscale(1) brightness(.8)!important} .sk.nores .cost{color:#ff6a5a!important;font-size:15px} /* ---- esferas en pixel art: vida a la izquierda, maná / furia a la derecha ---- */ .orb{position:absolute;bottom:-9px;width:192px;height:192px;z-index:0} #orb-hp{left:-163px}#orb-res{right:-163px} .orb canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated} .orb span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 27px/1 var(--ui);color:#fff;text-shadow:-2px -2px 0 #0d0a11,2px -2px 0 #0d0a11,-2px 2px 0 #0d0a11,2px 2px 0 #0d0a11,0 -2px 0 #0d0a11,0 2px 0 #0d0a11,-2px 0 0 #0d0a11,2px 0 0 #0d0a11,0 4px 8px #000a;pointer-events:none} .orb span small{font:600 14px/1 var(--ui);color:#f3eadb;margin-top:5px} .orb.low canvas{animation:orbLow .45s steps(3) infinite alternate} @keyframes orbLow{to{filter:drop-shadow(0 0 6px #ff2a1a) brightness(1.15)}} body.touch .orb{display:none} body:not(.touch) #b-hp,body:not(.touch) #b-res{display:none} /* ---- barra de habilidades en pixel art (en escritorio) ---- */ #skills .sk-bg{display:none} body:not(.touch) #skills{background:none;border:0;box-shadow:none;border-radius:0;padding:15px 18px;gap:6px} body:not(.touch) #skills .sk-bg{display:block;position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated;z-index:1} body:not(.touch) #skills .sk{z-index:2} body:not(.touch) .sk{border:3px solid #0d0a11;border-radius:0;background:#18131f!important;box-shadow:inset 3px 3px 0 #07050a,inset -3px -3px 0 #3b3150;clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)} body:not(.touch) .sk:hover{border-color:var(--edge);box-shadow:inset 3px 3px 0 #07050a,inset -3px -3px 0 #3b3150} body:not(.touch) .sk.nores{border-color:#8a2222} body:not(.touch) .sk[data-it="pot"]{margin-left:9px} /* en pantallas más estrechas la barra y las esferas se encogen juntas para que quepan */ @media (max-width:1140px){body:not(.touch) #skills{transform:translateX(-50%) scale(.86);transform-origin:50% 100%}} @media (max-width:980px){body:not(.touch) #skills{transform:translateX(-50%) scale(.74)}} @media (max-width:840px){body:not(.touch) #skills{transform:translateX(-50%) scale(.62)}} /* ---- ventana de estadísticas (a la izquierda) ---- */ #win-stats .box{width:min(380px,100%)} body.side #win-stats{left:10px;top:calc(env(safe-area-inset-top,0px) + 112px);width:320px} body.side #win-stats .box{width:100%;max-height:none;overflow:visible;padding:10px 14px 12px} body.side.npc-left #win-stats{left:560px} #stats .st-who{font:500 14px var(--ui);color:var(--muted);margin:-4px 0 6px} #stats .st-sec{font:700 13px var(--ui);color:#e8d9a8;margin:8px 0 2px;padding-bottom:2px;border-bottom:1px solid #ffffff1a} #stats .stl{font-size:13.5px;line-height:1.4} #stats .st-ef{color:#e8d9a8} .stl b i.buf{color:#9fe08a;font-style:normal}.stl b i.deb{color:#ff7a6a;font-style:normal}.stl b small{color:var(--muted);font-weight:500;font-size:12px} /* marco de pixel art de las ventanas (la imagen la genera frameSVG en sprites.js); las esquinas achaflanadas dejan ver el fondo */ .win .box.frame{border:16px solid transparent;border-image:var(--frame) 8 / 16px round;border-radius:0;background-clip:padding-box;box-shadow:0 8px 18px #000a} .hd-btns{display:flex;gap:6px;align-items:flex-start} /* ---- filas bloqueadas de la bolsa y del almacén ---- */ /* fila bloqueada de la bolsa o del almacén: las 8 casillas de esa fila, apagadas, y encima una placa (como un botón del juego) con el candado y, si ya se puede comprar, el precio */ .row-lock{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:inherit;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:600 13px var(--ui);color:var(--text);cursor:pointer} .row-lock i{aspect-ratio:1;background:#15101b;border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px #1b1524} .row-lock .rl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:6px 11px 7px;white-space:nowrap;line-height:1;background:var(--panel);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px var(--edge-d),inset 0 -3px 0 #0005,0 3px 0 #0007} .row-lock .rl-p{padding-left:9px;border-left:2px solid var(--edge-d)} .row-lock:hover .rl{box-shadow:inset 0 0 0 2px var(--edge),inset 0 -3px 0 #0005,0 3px 0 #0007} .row-lock:hover i{background:#1a1423;box-shadow:inset 0 0 0 2px #241d30} .row-lock:disabled{cursor:default;color:#8b819c} .row-lock:disabled .rl{background:none;border-color:transparent;box-shadow:none} .row-lock:disabled i{background:#130e18;box-shadow:inset 0 0 0 2px #18121f} .cand{width:16px;height:16px;flex:none;image-rendering:pixelated}.cand.off{filter:grayscale(1);opacity:.55}.jw-sc .cand{width:24px;height:24px} .row-lock.poor .coin{color:#ff8a7a} /* ---- ganancias arriba de la pantalla (+5 esencia...) ---- */ #gains{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 132px);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;z-index:6} #gains div{display:flex;align-items:center;gap:6px;font:700 19px var(--ui);color:#f4ecda;text-shadow:2px 2px 0 #000,-1px -1px 0 #000;opacity:0;transform:translateY(-8px) scale(.92);transition:opacity .25s,transform .25s} #gains div.show{opacity:1;transform:none} #gains img{width:20px;height:20px;image-rendering:pixelated} .coin.prem{color:#bff4ff} /* ---- páginas de la bolsa y del almacén ---- */ .pg-tabs{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap} .pg-tabs .btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font:600 12px var(--ui)} .pg-tabs .btn.buy{color:#bff4ff} /* la ventana del Pase Dunquest: la quinta pestaña de la bolsa y del almacén, con la corona del pase; sin pase, la corona apagada y un candado */ .pg-tabs .btn.pg-pase{gap:3px;padding:4px 8px;box-shadow:inset 0 0 0 2px #8a6a1e} .pg-tabs .btn.pg-pase.on{box-shadow:inset 0 0 0 2px var(--xp)} .pg-tabs .btn.pg-pase .pxi{width:16px;height:16px;margin:0} .pg-tabs .btn.pg-pase.cerr{box-shadow:inset 0 0 0 2px #3a2f48}.pg-tabs .btn.pg-pase.cerr .pxi{filter:grayscale(.75) brightness(.7)} .pg-tabs .btn.dropok{outline:2px solid #7de07a;outline-offset:-2px} /* ---- revivir pagando ---- */ #death .actions{pointer-events:auto;justify-content:center;margin-top:16px} #death .btn{font-size:16px;padding:11px 16px} /* ---- PvP ---- */ #pvp-hud{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 58px);z-index:6;padding:7px 16px 8px;display:none;text-align:center;min-width:280px;pointer-events:auto} #pvp-hud.on{display:block} .ph-row{display:flex;align-items:center;justify-content:center;gap:14px;font:700 21px var(--ui);text-shadow:1px 1px 0 #000} .ph-a{color:#5aa2ff}.ph-b{color:#ff5a4a} .ph-mid{font:700 18px var(--ui);color:#f4ecda;min-width:84px} .ph-mid.sub{color:#ff6a5a;animation:orbLow .45s steps(3) infinite alternate} .ph-sub{font:500 12px var(--ui);color:var(--muted);margin-top:2px} .ph-flags{display:flex;gap:14px;justify-content:center;font:600 12px var(--ui);margin-top:3px} .ph-flags:empty{display:none} /* mejoras del mapa de banderas en el marcador: icono y "lista" o los segundos que faltan; las de daño, subrayadas con el color de su lado */ .ph-mej{display:flex;gap:12px;justify-content:center;font:600 12px var(--ui);margin-top:5px;color:var(--muted)} .ph-mej:empty{display:none} .ph-mej span{display:inline-flex;align-items:center;gap:4px;padding-bottom:2px;border-bottom:2px solid transparent} .ph-mej img{display:block;width:16px;height:16px;image-rendering:pixelated;outline:1px solid #0d0a11} .ph-mej span:not(.ok) img{filter:grayscale(1) brightness(.7)} .ph-mej .ok{color:#a5dc8c} .ph-mej .az{border-bottom-color:#5aa2ff}.ph-mej .ro{border-bottom-color:#ff5a4a} #pvp-leave{position:absolute;right:-10px;top:50%;transform:translate(100%,-50%);font-size:12px;padding:6px 9px} #pvp-big{position:fixed;left:50%;top:28%;transform:translate(-50%,-50%);z-index:7;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap} #pvp-big.on{opacity:1} #pvp-big b{display:block;font:700 56px var(--title);color:#ffe14a;text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000} #pvp-big small{display:block;font:600 18px var(--ui);color:#f4ecda;text-shadow:2px 2px 0 #000;margin-top:4px} #pvp-feed{position:fixed;right:calc(env(safe-area-inset-right,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 232px);z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none} body:not(.touch) #pvp-feed{top:max(calc(env(safe-area-inset-top,0px) + 232px),calc(var(--menu-b,0px) + 182px))} /* debajo del minimapa, esté donde esté */ #pvp-feed div{font:600 13px var(--ui);background:#000b;padding:4px 9px;text-shadow:1px 1px 0 #000;transition:opacity .6s;color:#f4ecda} #pvp-q{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 58px);z-index:6;display:none;align-items:center;gap:10px;padding:6px 8px 6px 14px;font:600 14px var(--ui)} #pvp-q.on{display:flex} #pvp-q .btn{padding:4px 8px;font-size:12px} .pvp-box{width:min(780px,100%)} /* la tienda de diamantes y el Pase Dunquest */ .dia-box{width:min(700px,100%)}.dia-box h2 .pxi{margin-right:8px} .dia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dia-grid.dos{grid-template-columns:1fr 1fr} .dia-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 10px 12px;background:var(--panel2);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px #4a3f5c;text-align:center} .dia-card.mejor{box-shadow:inset 0 0 0 2px #8a7340} .dia-card .dia-ic{width:132px;height:132px;image-rendering:pixelated;object-fit:contain} .dia-card b{font:700 17px var(--ui);color:#f4ecda}.dia-card small{font:500 12px var(--ui);color:var(--muted)} .dia-card em{position:absolute;right:6px;top:6px;font:700 11px var(--ui);font-style:normal;color:#1a1420;background:#e6c64a;padding:2px 6px} .dia-card .dia-buy{margin-top:8px;min-width:104px;font-weight:700;background-color:#34503a;color:#e4f7dc}.dia-card .dia-buy:hover:not([disabled]){background-color:#3e6046} .dia-nota{margin:10px 0 0;color:var(--muted);font:400 13px/1.4 var(--ui)}.dia-nota.prueba{margin:0 0 10px;color:#ffd27a}.dia-nota.espera{margin:0 0 10px;padding:8px 10px;background:var(--inset);color:#f4ecda;display:flex;gap:10px;align-items:center;justify-content:space-between} .pase-est{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:10px;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px #3a3046}.pase-est.on{box-shadow:inset 0 0 0 2px #8a7340} .pase-est .pxi{width:33px;height:21px;flex:none;opacity:.45}.pase-est.on .pxi{opacity:1}.pase-est div{flex:1}.pase-est b{display:block;font:700 16px var(--ui)}.pase-est.on b{color:#ffe98a}.pase-est small{display:block;font:500 13px var(--ui);color:var(--muted);margin-top:2px} .pase-vent{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:12px;font:500 14px var(--ui)}.pase-vent b{grid-column:1/-1;font:700 13px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .pase-vent span{display:flex;align-items:center;gap:8px}.pase-vent .pxi{flex:none}.pase-vent small{grid-column:1/-1;font:400 13px/1.4 var(--ui);color:var(--muted);margin-top:4px} #h-pase{width:22px;height:14px;margin-left:6px;vertical-align:-1px} #m-dia.aviso{position:relative}#m-dia.aviso::after{content:'';position:absolute;right:-3px;top:-3px;width:8px;height:8px;background:#e6c64a;border:2px solid #0d0a11} @media (max-width:640px){.dia-grid{grid-template-columns:1fr 1fr}.pase-vent{grid-template-columns:1fr}.dia-card .dia-ic{width:99px;height:99px}} .pvp-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px} .pvp-mode{display:flex;flex-direction:column}.pvp-mode .sub{flex:1} .pvp-mode h3,#pvp-body .card h3{margin:0 0 4px;font:700 16px var(--ui)} .pvp-rank{width:100%;border-collapse:collapse;font:500 14px var(--ui)} .pvp-rank th{font:600 12px var(--ui);color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid #ffffff22} .pvp-rank td{padding:5px 6px;border-bottom:1px solid #ffffff10} .pvp-rank tr.me td{color:#e6c64a;font-weight:700} /* puntos y rangos de PvP: la insignia va en pixel art, teñida con el color del rango */ .pvp-rango{display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap}.pvp-rango img{width:16px;height:16px;flex:none;image-rendering:pixelated} .pvp-clas small{color:var(--muted);font-weight:400;font-size:12px}.pvp-clas th:nth-child(n+4),.pvp-clas td:nth-child(n+4){text-align:right;font-variant-numeric:tabular-nums}.pvp-clas td:first-child{color:var(--muted);width:34px} .pvp-mirango{margin-bottom:10px}.pvp-mr-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 15px var(--ui)} .pvp-prog{height:12px;margin:7px 0 5px;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438}.pvp-prog i{display:block;height:100%;box-shadow:inset 0 -3px 0 #0004} .pvp-pts{margin-top:12px}.pvp-pts-n{font:700 26px var(--title);color:#e6c64a;text-align:center}.pvp-pts>.sub{text-align:center;margin:2px 0 10px}.pvp-pts .pvp-prog+.sub{text-align:left} .pvp-sube{margin:0 0 10px;padding:6px 10px;text-align:center;font:700 16px var(--ui);color:#f4ecda;background:var(--panel2);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px var(--edge)} /* árbol de honor: la barra partida en seis tramos y, debajo, cada escalón con sus dos mejoras (la elegida, con el borde dorado) */ .hon-top .pvp-mr-top .pxi{margin-right:6px} .hon-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px} .hon-seg{text-align:center;color:var(--muted)}.hon-seg .pvp-prog{margin:0 0 4px}.hon-seg .pvp-prog i{background:#d9b24a} .hon-seg b{display:block;font:700 14px var(--ui)}.hon-seg small{display:block;font:500 11px var(--ui);font-variant-numeric:tabular-nums}.hon-seg.ok b{color:#e6c64a} .hon-fila{display:grid;grid-template-columns:168px 1fr;gap:12px;align-items:center;margin-bottom:8px} .hon-cab b{display:block;font:700 12px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.hon-cab i{display:block;font:700 16px var(--ui);font-style:normal;color:#f4ecda;margin-top:1px} .hon-cab span{display:block;font:500 12px var(--ui);color:var(--muted);margin-top:3px} .hon-cab small{display:block;font:600 12px var(--ui);margin-top:4px}.hon-cab small.ok{color:#7de07a}.hon-cab small.el{color:#e6c64a}.hon-cab small.no{color:#e0a05a} .hon-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hon-op{position:relative;display:flex;align-items:flex-start;gap:8px;text-align:left;padding:8px 9px;min-height:78px;color:inherit;font:inherit;cursor:pointer;background:var(--panel2);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px #4a3f5c} .hon-op .pxi{flex:none;width:24px;height:24px;margin:1px 0 0}.hon-op b{display:block;font:700 14px var(--ui);color:#f4ecda}.hon-op small{display:block;font:500 12px/1.3 var(--ui);color:var(--muted);margin-top:2px} .hon-op em{position:absolute;right:6px;top:5px;font:700 10px var(--ui);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:#1a1420;background:#e6c64a;padding:1px 5px} .hon-op:hover:not(:disabled):not(.on){box-shadow:inset 0 0 0 2px #8a7aa8} .hon-op.on{box-shadow:inset 0 0 0 2px #e6c64a;background:#3a3122}.hon-op.on b{color:#ffe98a;padding-right:58px}.hon-op.on small{color:#d8cfb8} .hon-op:disabled{cursor:default;opacity:.5}.hon-fila.bloq .hon-cab i{color:var(--muted)} @media(max-width:640px){.hon-fila{grid-template-columns:1fr}.hon-ops{grid-template-columns:1fr}} .pvp-res h2{font:700 38px var(--title);margin:0 0 4px;text-align:center} #death.pvp .actions{display:none} body.side #win-pvp,body.side #win-pvpfin{inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px} body.side #win-pvp.open,body.side #win-pvpfin.open{display:flex} #win-pvpfin{z-index:24} #win-pvpfin .box{width:min(1120px,100%)} /* el resultado lleva las dos tablas, una al lado de la otra */ #inv-money,#bag-free{display:none!important} /* el inventario ya no muestra monedas ni huecos libres */ #menu .btn{padding:7px 9px;font-size:13px}#menu kbd{margin-left:4px} /* ---- efectos activos (Piel de dragón, Guardián…): iconos pequeños con lo que les queda, encima de la barra a la izquierda ---- */ #buffs{position:absolute;left:18px;bottom:calc(100% + 4px);display:flex;gap:6px;pointer-events:none;z-index:3} body.touch #buffs{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);bottom:auto;top:160px} .buff{width:32px;text-align:center;pointer-events:auto;cursor:help} .buff.mal .bi{box-shadow:0 0 0 1px #c04a3a} #skills .sk.nopvp{opacity:.4} /* casino: el agujero mágico se pinta a 80x60 y se amplía x3 (pixel art); las monedas de abajo se arrastran al agujero */ .casino{display:flex;gap:14px;align-items:flex-start}.cas-left{flex:none;width:240px}.cas-stage{position:relative;width:240px;height:200px}.cas-stage canvas{position:absolute;left:0;top:20px;width:240px;height:180px;image-rendering:pixelated} .cas-anim{position:absolute;left:100px;top:88px;width:40px;height:40px;image-rendering:pixelated;pointer-events:none;transform-origin:center} #cas-txt{position:absolute;left:0;right:0;top:0;text-align:center;font:700 15px var(--ui);text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000} .cas-bets{display:flex;justify-content:space-between;margin-top:4px}.cas-bet{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:grab;user-select:none;width:58px;touch-action:none}.cas-bet img{width:40px;height:40px;image-rendering:pixelated;pointer-events:none}.cas-bet span{font:600 11px var(--ui);color:var(--muted);text-align:center;pointer-events:none}.cas-bet.poor{opacity:.4;cursor:not-allowed} .cas-hist{flex:1;min-width:0}.cas-hh,.cas-row{display:flex;justify-content:space-between;gap:8px;font:400 13px/1.4 var(--ui);padding:3px 0;border-bottom:1px solid #ffffff14}.cas-hh{color:var(--muted);font-weight:600}.cas-row img{width:16px;height:16px;image-rendering:pixelated;vertical-align:-3px;margin-right:4px}.cas-row span{white-space:nowrap;flex:none}.cas-row b{font-weight:700;text-align:right} #cas-drag{position:fixed;left:0;top:0;width:40px;height:40px;image-rendering:pixelated;display:none;pointer-events:none;z-index:60} .buff .bi{width:32px;height:32px;display:grid;place-items:center;font-size:18px;line-height:1;box-sizing:border-box;border:2px solid #0d0a11;box-shadow:0 0 0 1px #c9a24a;background:#18131f} .buff .bi img{display:block;width:100%;height:100%;image-rendering:pixelated} /* el tiempo de cada efecto, como un reloj (igual que la recarga de las habilidades): .br es una copia en gris del icono que tapa la parte ya gastada; --f es la fracción gastada (de 0 a 1) y .bh, la aguja */ .buff .bi{position:relative;overflow:hidden} .buff .br{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#18131f;filter:grayscale(1) brightness(.5);-webkit-mask-image:conic-gradient(#000 0 calc(var(--f,0)*1turn),transparent 0);mask-image:conic-gradient(#000 0 calc(var(--f,0)*1turn),transparent 0)} .buff .bh{position:absolute;left:calc(50% - 1px);bottom:50%;width:2px;height:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);transform-origin:50% 100%;transform:rotate(calc(var(--f,0)*1turn));pointer-events:none} .buff span{display:block;margin-top:2px;font:700 11px var(--ui);color:#f4ecda;white-space:nowrap;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000} .buff.fin .bi{animation:buffFin .5s steps(2) infinite} @keyframes buffFin{50%{opacity:.45}} @media (prefers-reduced-motion:reduce){.buff.fin .bi{animation:none}} /* ---- partidas de PvP (1v1, 3v3 y 5v5): marcador arriba a la derecha (donde va el minimapa) y minimapa abajo a la derecha ---- */ body.pvp-partida #pvp-hud{left:auto;transform:none;right:calc(env(safe-area-inset-right,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 58px)!important;min-width:0;max-width:300px} body.pvp-partida #pvp-leave{position:static;transform:none;display:block;margin:6px auto 0} body.pvp-partida .ph-flags{flex-direction:column;gap:2px} body.pvp-partida #pvp-feed{top:calc(env(safe-area-inset-top,0px) + 214px)} body.pvp-partida #minimap{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 34px)} @media (max-width:1500px){body.pvp-partida:not(.touch) #minimap{bottom:calc(env(safe-area-inset-bottom,0px) + 132px)}} body.pvp-partida #log{display:none} body.touch.pvp-partida #pvp-hud{max-width:186px;padding:6px 10px 7px} body.touch.pvp-partida .ph-row{font-size:16px;gap:8px}body.touch.pvp-partida .ph-mid{font-size:15px;min-width:0}body.touch.pvp-partida .ph-sub{font-size:11px} body.touch.pvp-partida #minimap{bottom:calc(env(safe-area-inset-bottom,0px) + 176px)} /* en móvil el chat baja un poco para dejar sitio a los efectos activos y, en partida, al marcador */ body.touch #chat{top:calc(env(safe-area-inset-top,0px) + 178px)} body.touch.pvp-partida #chat{top:calc(env(safe-area-inset-top,0px) + 204px)} /* ---- estadísticas de la partida de PvP (tecla J): azules a la izquierda, rojos a la derecha ---- */ #win-pvpst{background:#0007} .pvpst-box{width:min(900px,100%)} .pvpst{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pvpst h3{margin:0 0 6px;font:700 18px var(--ui)} .pvpst .az h3{color:#5aa2ff}.pvpst .ro h3{color:#ff5a4a} .pvpst small{color:var(--muted);font-weight:400;font-size:12px} .pvpst .pvp-rank th:not(:first-child),.pvpst .pvp-rank td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums} .pvpst .pvp-rank tr.tot td{color:var(--muted);border-top:1px solid #ffffff33;border-bottom:0} @media (max-width:700px){.pvpst{grid-template-columns:1fr}} body.side #win-pvpst{inset:0;display:none;align-items:center;justify-content:center;background:#0007;padding:10px} body.side #win-pvpst.open{display:flex} /* ---- barras de desplazamiento con aspecto de pixel art: carril hundido, bloque dorado con relieve y agarre, y flechas de píxeles ---- */ ::-webkit-scrollbar{width:16px;height:16px} ::-webkit-scrollbar-track{background:linear-gradient(#3a2f4a 50%,transparent 0) 50% 0/2px 4px repeat-y,var(--inset);box-shadow:inset 2px 0 0 #0d0a11,inset -2px 0 0 var(--edge-d)} ::-webkit-scrollbar-track:horizontal{background:linear-gradient(90deg,#3a2f4a 50%,transparent 0) 0 50%/4px 2px repeat-x,var(--inset);box-shadow:inset 0 2px 0 #0d0a11,inset 0 -2px 0 var(--edge-d)} ::-webkit-scrollbar-thumb{background:linear-gradient(#7a5c20,#7a5c20) 50% calc(50% - 4px)/6px 2px no-repeat,linear-gradient(#7a5c20,#7a5c20) 50% 50%/6px 2px no-repeat,linear-gradient(#7a5c20,#7a5c20) 50% calc(50% + 4px)/6px 2px no-repeat,var(--edge);border:2px solid #0d0a11;box-shadow:inset 2px 2px 0 #f0d58a,inset -2px -2px 0 #8a6a28;min-height:40px} ::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(#7a5c20,#7a5c20) calc(50% - 4px) 50%/2px 6px no-repeat,linear-gradient(#7a5c20,#7a5c20) 50% 50%/2px 6px no-repeat,linear-gradient(#7a5c20,#7a5c20) calc(50% + 4px) 50%/2px 6px no-repeat,var(--edge);min-height:0;min-width:40px} ::-webkit-scrollbar-thumb:hover{background-color:#e2bc5e} ::-webkit-scrollbar-thumb:active{background-color:#a8842f;box-shadow:inset 2px 2px 0 #8a6a28,inset -2px -2px 0 #f0d58a} ::-webkit-scrollbar-button{display:none} ::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment{display:block;width:16px;height:16px;background-color:var(--panel2);background-repeat:no-repeat;background-position:center;background-size:12px 12px;border:2px solid #0d0a11} ::-webkit-scrollbar-button:hover{background-color:#55456c} ::-webkit-scrollbar-button:active{background-color:var(--inset)} ::-webkit-scrollbar-button:vertical:start:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23e6c64a' d='M5 3h2v2H5zM3 5h6v2H3zM1 7h10v2H1z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-button:vertical:end:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23e6c64a' d='M1 3h10v2H1zM3 5h6v2H3zM5 7h2v2H5z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-button:horizontal:start:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23e6c64a' d='M3 5h2v2H3zM5 3h2v6H5zM7 1h2v10H7z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-button:horizontal:end:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23e6c64a' d='M3 1h2v10H3zM5 3h2v6H5zM7 5h2v2H7z'/%3E%3C/svg%3E")} ::-webkit-scrollbar-corner{background:var(--inset)} /* la tira de gemas del joyero es baja: barra más fina, sin flechas ni agarre */ .jw-strip::-webkit-scrollbar{height:10px} .jw-strip::-webkit-scrollbar-button{display:none!important} .jw-strip::-webkit-scrollbar-thumb:horizontal{background:var(--edge);box-shadow:inset 0 2px 0 #f0d58a,inset 0 -2px 0 #8a6a28} /* navegadores sin ::-webkit-scrollbar (Firefox): al menos, los mismos colores */ @supports not selector(::-webkit-scrollbar){*{scrollbar-color:#c9a24a #1c1624}} /* iconos de interfaz en pixel art (js/sprites.js: pxi) */ .pxi{width:16px;height:16px;image-rendering:pixelated;vertical-align:-3px;margin-right:5px}.pxi.solo{margin-right:0} h2 .pxi,h3 .pxi{width:20px;height:20px;vertical-align:-3px;margin-right:7px}.buff .bi .pxi{margin:0}.pill .pxi{width:14px;height:14px;vertical-align:-3px;margin-right:3px}.pill .pxi.solo{margin-right:0} #mm-world .pxi{width:16px;height:16px;vertical-align:0} .lider::before{content:"";display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;background:var(--ic-corona) center/contain no-repeat;image-rendering:pixelated} [data-yo]::after{content:attr(data-yo)} /* ---------- Cuentas: pantalla de inicio, personajes y tutorial ---------- */ .solo-cuenta{display:none} body.con-cuenta .solo-cuenta{display:flex} body.con-cuenta .sin-cuenta,body.con-cuenta #m-cls{display:none!important} #cuenta{position:fixed;inset:0;z-index:60;display:flex;align-items:safe center;justify-content:center;overflow:auto;padding:24px 14px;touch-action:auto; background:radial-gradient(ellipse at 50% 30%,#2a1f3acc 0%,#14101af2 55%,#0b0810 100%)} #cuenta[hidden],#tuto[hidden],#tu-flecha[hidden]{display:none} .cu-caja{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:18px;margin:auto} .cu-logo{text-align:center;line-height:1} .cu-logo b{display:block;font:700 68px var(--title);color:#f2c94c;letter-spacing:2px;text-shadow:4px 5px 0 #7c5a1a,0 0 0 #000,-3px 0 0 #2a1c08,3px 0 0 #2a1c08,0 -3px 0 #2a1c08,0 3px 0 #2a1c08} .cu-logo span{display:inline-block;margin-top:12px;padding-top:9px;border-top:4px solid var(--text);font:700 17px var(--title);letter-spacing:3px;color:var(--text)} .cu-ver{display:block;margin-top:8px;font:400 13px var(--ui);font-style:normal;letter-spacing:1px;color:var(--text);opacity:.6} /* la versión del juego, debajo del logo */ .o-ver{font:700 15px var(--ui);color:#f2c94c} .cu-panel{display:none;width:100%;max-width:400px;background:var(--panel);padding:14px 16px 16px;flex-direction:column;gap:11px} .cu-panel.cu-ancho{max-width:760px} .cu-panel.on{display:flex} .cu-panel.frame{border:16px solid transparent;border-image:var(--frame) 8 / 16px round;background-clip:padding-box;box-shadow:0 10px 24px #000b} .cu-panel h2{margin:0;font:700 24px var(--title);color:var(--xp)} .cu-panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .cu-panel label{display:flex;flex-direction:column;gap:5px;font:500 14px var(--ui);color:var(--muted)} .cu-panel label small{font:400 12px var(--ui);color:#8d8496} .cu-panel input:not([type=checkbox]){font:500 16px var(--ui);color:var(--text);background:#120e18;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #3a3050;padding:9px 10px;width:100%;outline:none} .cu-panel input:not([type=checkbox]):focus{box-shadow:inset 0 0 0 2px var(--edge)} .cu-panel input.mal{box-shadow:inset 0 0 0 2px #d64545} .cu-cod{font:700 28px var(--title)!important;letter-spacing:10px;text-align:center} .cu-ok{font:700 16px var(--ui);padding:12px;background-color:#5a4420;border-image-source:var(--marco-b-on);box-shadow:inset 0 -3px 0 #0006;color:#fff3c8} .cu-ok:hover{background-color:#6e5528} .cu-error{min-height:18px;font:500 14px var(--ui);color:#ff8a7a} .cu-aviso{font:400 13px/1.4 var(--ui);color:#ffd27a;background:#3a2f1a;border:2px solid #0d0a11;padding:8px 10px} .cu-aviso:empty{display:none} .cu-pie{margin:2px 0 0;text-align:center;font:400 14px var(--ui);color:var(--muted)} .cu-pie i{display:inline-block;width:14px} .cu-enlace{font:500 14px var(--ui);color:var(--xp);background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .cu-enlace:hover{color:#fff3c8} .cu-olv{align-self:flex-end;margin:-6px 0 0;font-size:13px} /* «¿Has olvidado la contraseña?», bajo la contraseña */ .cu-google{display:none;flex-direction:column;gap:11px;align-items:center} .cu-google.on{display:flex} .cu-o{width:100%;display:flex;align-items:center;gap:10px;font:400 13px var(--ui);color:var(--muted)} .cu-o::before,.cu-o::after{content:"";flex:1;height:2px;background:#ffffff1a} .cu-check{flex-direction:row!important;align-items:center;gap:9px!important;color:var(--text)!important;cursor:pointer} .cu-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .cu-pj{background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px var(--edge-d);padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:318px} .cu-pj canvas{width:176px;height:176px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 82%,#4a3d5c 0 28%,transparent 58%)} .cu-pj .n{font:700 20px var(--title);color:var(--text)} .cu-pj .c{font:400 14px var(--ui);color:var(--muted)} .cu-pj .cu-ok{width:100%;margin-top:auto} .cu-pj .cu-enlace{font-size:13px;color:#b9ad95} .cu-pj .borra{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:auto} .cu-pj .borra .btn{width:100%} .cu-pj.vacio{justify-content:center;gap:12px;cursor:pointer;border-style:solid;color:var(--muted);font:500 15px var(--ui)} .cu-pj.vacio:hover{box-shadow:inset 0 0 0 2px var(--edge);color:var(--text)} .cu-pj.vacio .mas{width:42px;height:42px;background:linear-gradient(#c9a24a,#c9a24a) 50% 50%/42px 10px no-repeat,linear-gradient(#c9a24a,#c9a24a) 50% 50%/10px 42px no-repeat} .cu-clases{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cu-clase{background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 2px var(--edge-d);padding:10px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;text-align:center;color:var(--text);font:400 14px/1.45 var(--ui)} .cu-clase canvas{width:176px;height:176px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 82%,#4a3d5c 0 28%,transparent 58%)} .cu-clase b{font:700 24px var(--title);color:var(--text)} .cu-clase span{color:var(--muted)} .cu-clase em{font:500 13px var(--ui);font-style:normal;color:var(--xp);margin-top:2px} .cu-clase:hover{box-shadow:inset 0 0 0 2px var(--edge)} .cu-clase.on{box-shadow:inset 0 0 0 3px var(--xp);background:#2e2440} .cu-clase.on b{color:var(--xp)} @media (max-width:700px){.cu-lista,.cu-clases{grid-template-columns:1fr}.cu-logo b{font-size:46px}.cu-pj{min-height:0}} /* tutorial */ #tuto{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:40;width:min(470px,calc(100vw - 20px));background:var(--panel);padding:10px 14px 12px;border:16px solid transparent;border-image:var(--frame) 8 / 16px round;background-clip:padding-box;box-shadow:0 8px 18px #000a} .tu-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .tu-cab b{font:700 20px var(--title);color:var(--xp)} .tu-cab span{font:400 13px var(--ui);color:var(--muted)} #tu-txt{margin:6px 0 10px;font:400 15px/1.45 var(--ui);color:var(--text)} #tu-txt kbd{display:inline-block;min-width:22px;text-align:center;font:700 13px var(--ui);color:#fff3c8;background:#120e18;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px var(--edge-d);padding:2px 5px;margin:0 1px} .tu-puntos{display:flex;gap:5px;margin-bottom:10px} .tu-puntos i{width:12px;height:6px;background:#120e18;box-shadow:inset 0 0 0 1px var(--edge-d)} .tu-puntos i.hecho{background:var(--edge)} .tu-puntos i.ahora{background:var(--xp)} .tu-bot{display:flex;justify-content:space-between;gap:10px} #tuto.bien{box-shadow:0 0 0 3px #7de07a,0 8px 18px #000a} #tu-flecha{position:fixed;z-index:15;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-100%)} #tu-flecha canvas{width:33px;height:27px;image-rendering:pixelated} #tu-flecha span{font:700 13px var(--ui);color:#fff3c8;background:#0d0a11cc;padding:2px 6px;order:-1} /* lo marcado como oculto no se enseña aunque su clase diga otra cosa; y con los paneles anchos (personajes) el título se encoge para que todo quepa en pantallas bajas */ #cuenta [hidden]{display:none!important} #cuenta.cu-compacta .cu-logo b{font-size:44px} #cuenta.cu-compacta .cu-logo span{display:none} #cuenta.cu-compacta .cu-caja{gap:12px} #cuenta.cu-compacta{padding-top:14px;padding-bottom:14px} .cu-clase canvas{margin:-18px 0 -8px} .cu-pj canvas{margin:-10px 0 -6px} /* ---- logros (L): recompensa diaria, título y lista; el título en la placa y el aviso de logro conseguido ---- */ .lg-box{width:min(780px,100%)}.lg-box h2 .pxi{margin-right:8px} body.side #win-logros{inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px}body.side #win-logros.open{display:flex} /* en el centro, como la de PvP */ #reinicio{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);transform:translateX(-50%);z-index:25;pointer-events:none;min-width:290px;border:14px solid transparent;border-image:var(--marco-lg3) 7 / 14px round;background:#1a142080;background-clip:padding-box;opacity:.85;text-shadow:1px 0 #0d0a11,-1px 0 #0d0a11,0 1px #0d0a11,0 -1px #0d0a11;padding:0 10px 2px;display:flex;flex-direction:column;align-items:center;font:400 13px/1.35 var(--ui);color:#f4ecda;text-align:center} /* la cuenta atrás de una actualización: arriba, con el marco de oro de Logros */ #reinicio[hidden],#rei-t[hidden]{display:none}#reinicio b{font:700 15px/1.4 var(--ui);color:#ffd27a}#reinicio em{font:700 28px/1.15 var(--ui);font-style:normal;color:#fff3c8;letter-spacing:1px}#reinicio small{color:var(--muted);font-size:12px} #version{position:fixed;right:calc(env(safe-area-inset-right,0px) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 3px);z-index:5;pointer-events:none;font:600 11px var(--ui);color:#f4ecdab0;text-shadow:1px 0 #0d0a11,-1px 0 #0d0a11,0 1px #0d0a11,0 -1px #0d0a11} /* el número de versión, pequeño, abajo a la derecha */ body.side #win-hoy{inset:0;display:none;align-items:center;justify-content:center;background:#000a;padding:10px}body.side #win-hoy.open{display:flex} /* la recompensa y la tarea del día al entrar: en el centro */ .lg-h{margin:16px 0 7px;font:700 16px var(--ui);color:#f4ecda;display:flex;align-items:baseline;gap:10px}.lg-h:first-child{margin-top:2px}.lg-h small{font:400 13px var(--ui);color:var(--muted)} .lg-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .lg-dia{background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438;padding:6px 3px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center} .lg-dia b{font:700 12px var(--ui);color:var(--muted)}.lg-dia>img{width:32px;height:32px;image-rendering:pixelated} .lg-dia .lg-t{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;font:600 12px var(--ui);color:#e8e0d0;min-height:30px;align-content:flex-start}.lg-dia .lg-t .coin img{width:12px;height:12px} .lg-dia.hecho{opacity:.45}.lg-dia.hecho b{color:#7de07a} .lg-dia.hoy{border-color:#e6c64a;box-shadow:inset 0 0 0 1px #8a6a1e}.lg-dia.hoy b{color:#e6c64a} .lg-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px}.lg-pie .btn{flex:none} .lg-ramas{display:flex;flex-direction:column;gap:6px} .lg-rama{display:flex;gap:11px;align-items:flex-start;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438;padding:8px 10px 9px}.lg-ins{width:36px;height:36px;flex:none;image-rendering:pixelated;margin-top:1px}.lg-rc{flex:1;min-width:0}.lg-rama.ok{box-shadow:inset 0 0 0 1px #6a5420} .lg-rh{display:flex;align-items:center;gap:8px;margin-bottom:6px}.lg-rh img{width:22px;height:22px;flex:none;image-rendering:pixelated}.lg-rh b{flex:1;font:700 14px var(--ui);color:#f4ecda}.lg-rh small{font:600 12px var(--ui);color:var(--muted);white-space:nowrap} .lg-rama.ok .lg-rh small{color:#7de07a} .lg-escs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} .lg-esc{border:1px solid #2c2438;background:#191320;padding:4px 4px 5px;text-align:center;min-width:0}.lg-esc b{display:block;font:700 12px var(--ui);color:#8a8396} .lg-esc span{display:block;font:500 11px/1.25 var(--ui);color:#6e6880;overflow-wrap:anywhere} .lg-esc.ok{border-color:#8a6a1e;background:#2a2014}.lg-esc.ok b{color:#f0d890}.lg-esc.ok span{color:#e8dcc0}.lg-esc.sig{border-color:#5a4e70}.lg-esc.sig b{color:#e8e0d0}.lg-esc.sig span{color:#b9b0c6} .lg-rama .pvp-prog{height:7px;margin:7px 0 3px}.lg-rd{font:400 12px var(--ui);color:var(--muted)} #m-logros.aviso{position:relative}#m-logros.aviso::after{content:'';position:absolute;right:-3px;top:-3px;width:8px;height:8px;background:#e6c64a;border:2px solid #0d0a11} .ph-nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}.ph-nm>span{display:flex;align-items:center;min-width:0} #h-tit{display:flex;align-items:center;gap:4px;font:600 12px var(--ui);white-space:nowrap;overflow:hidden;margin-top:1px}#h-tit:empty{display:none}#h-tit img{width:11px;height:11px;flex:none;image-rendering:pixelated} #logro-pop{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 136px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px 11px 14px;z-index:30;pointer-events:none;opacity:0;transition:opacity .45s;max-width:calc(100vw - 24px)} #logro-pop.ver{opacity:1}#logro-pop>img{width:36px;height:36px;flex:none;image-rendering:pixelated}#logro-pop small{display:block;font:600 12px var(--ui);color:var(--muted)}#logro-pop b{display:block;font:700 20px var(--title);color:#f0d890}#logro-pop span{display:block;font:400 13px var(--ui);color:#e8e0d0} @media (max-width:640px){.lg-dias{grid-template-columns:repeat(4,1fr)}.lg-escs{grid-template-columns:repeat(3,1fr)}.lg-pie{flex-direction:column;align-items:stretch}} @media (prefers-reduced-motion: reduce){#logro-pop{transition:none}} /* ---- misiones: la ventana de quien las da (título, texto, objetivo, recompensa y, si toca, la gema de rango IV a elegir) ---- */ #q-body .q-t{margin:0 0 8px;font:700 20px var(--title);color:#ffe14a} #q-body .q-obj,#q-body .q-rec{background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438;padding:8px 11px 9px;margin-bottom:8px;font:400 14px/1.45 var(--ui)} #q-body .q-obj>b,#q-body .q-rec>b{display:block;font:700 13px var(--ui);color:var(--muted);margin-bottom:4px} #q-body .q-obj small{display:block;color:#7de07a;font:600 13px var(--ui);margin-top:3px} .q-prs{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center} .q-pr{display:inline-flex;align-items:center;gap:6px;font:500 13.5px var(--ui)}.q-pr>img{width:22px;height:22px;flex:none;image-rendering:pixelated}.q-pr .coin img{width:14px;height:14px} .q-gemas{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .q-gema{display:flex!important;flex-direction:column;align-items:center;gap:2px;padding:7px 3px 6px!important;font:600 12px var(--ui)!important;line-height:1.2!important;text-align:center} .q-gema img{width:32px;height:32px;image-rendering:pixelated}.q-gema small{font:400 10.5px var(--ui);color:var(--muted)} #sp-panel{position:fixed;right:calc(env(safe-area-inset-right,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 262px);width:300px;max-height:calc(100vh - 380px);overflow:auto;z-index:6;border:14px solid transparent;border-image:var(--marco-lg1) 7 / 14px round;background:#1c1724;background-clip:padding-box;padding:4px 8px 8px;font:400 13px/1.35 var(--ui);color:#e6dcc4} #sp-panel h3{margin:0 0 6px;font:700 15px var(--ui);color:#ffe14a}#sp-panel h4{margin:8px 0 4px;font:700 13px var(--ui);color:#c9b8e8} #sp-panel .sp-fila{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0}#sp-panel .sp-fila b{min-width:22px;text-align:center} #sp-panel .sp-lista{display:grid;grid-template-columns:1fr 1fr;gap:4px}#sp-panel .sp-en{font-size:12px;line-height:1.15;white-space:normal;width:100%}#sp-panel .sp-en.jefe{color:#ffb070}#sp-panel .sp-en.mini{color:#ffd27a}#sp-panel .sp-pie{margin-top:10px} .inv-cod{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px}.inv-cod b{font:700 24px var(--ui);letter-spacing:4px;color:#ffe14a}.inv-cod input{width:150px;text-transform:uppercase;font:600 15px var(--ui);color:var(--text);background:#120e18;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #3a3050;padding:6px 8px;outline:none;letter-spacing:2px}.inv-cod input:focus{box-shadow:inset 0 0 0 2px var(--edge)} /* como las casillas del registro */ .inv-tabla{margin:4px 0 6px}.inv-fila{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:8px;align-items:center;padding:4px 6px}.inv-fila:nth-child(odd){background:rgba(255,255,255,.04)}.inv-cab{color:#c9b8e8;font-weight:700} .inv-ms{display:flex;gap:6px;align-items:center}.inv-m{min-width:26px;text-align:center;color:#6f6880}.inv-m.ok{color:#7de07a;font-weight:700}.inv-m.ya{color:#ffe14a} .inv-rec{font-size:16px;margin:4px 0}.inv-gemas{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px} .q-aviso{color:#ff8a7a;font:600 13px var(--ui);margin:0 0 6px}.enc .q-aviso,#lg-body .q-aviso{margin:6px 0 0}.q-pr.q-ficha{cursor:help} @media (max-width:520px){.q-gemas{grid-template-columns:repeat(3,1fr)}} /* ---- el tablón de encargos: los que llevas arriba y los del tablón debajo, en tarjetas con marco (piedra los que puedes coger, plata los que llevas y oro los terminados) ---- */ .box.enc-box{width:min(620px,100%)}.enc-box h2 .pxi{margin-right:8px} .enc{border:14px solid transparent;border-image:var(--marco-lg0) 7 / 14px round;background:var(--inset);background-clip:padding-box;padding:1px 3px 2px;margin-bottom:6px;font:400 13.5px/1.45 var(--ui)} .enc.lleva{border-image-source:var(--marco-lg2)}.enc.ok{border-image-source:var(--marco-lg3)} .enc-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.enc-h b{font:700 17px var(--title);color:#8ad8ff}.enc-h small{font:400 12.5px var(--ui);color:var(--muted);white-space:nowrap} .enc-q{font:600 12.5px var(--ui);color:var(--muted)}.enc p{margin:4px 0 6px;color:#e8e0d0} .enc-o{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:2px 0 6px;font:600 13.5px var(--ui);color:#f4ecda}.enc-o em{font-style:normal;color:#7de07a;white-space:nowrap} .enc .actions{margin-top:7px;justify-content:flex-end}.enc-pr{margin-top:8px} #tracker .enc-tt{font:600 12.5px var(--ui);color:#8ad8ff;margin-top:7px} /* ---- la tarea del día (ventana de Logros): las tres para elegir y, ya elegida, su barra ---- */ .tarea-op{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tarea{border:14px solid transparent;border-image:var(--marco-lg0) 7 / 14px round;background:var(--inset);background-clip:padding-box;padding:2px 4px 4px;display:flex;flex-direction:column;gap:8px;font:400 13.5px/1.4 var(--ui)} .tarea>b{font:700 15px var(--ui);color:#f4ecda}.tarea .actions{margin-top:auto}.tarea-pr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tarea-pr small{color:var(--muted);font:600 12px var(--ui)} .tarea.sola{max-width:440px}.tarea.lista{border-image-source:var(--marco-lg2)}.tarea.hecha{border-image-source:var(--marco-lg3)} .tarea-barra{position:relative;height:20px;background:#120e18;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #3a3050}.tarea-barra i{position:absolute;left:0;top:0;bottom:0;background:#4f8a44} .tarea-barra span{position:relative;display:block;text-align:center;font:600 12px/16px var(--ui);color:#f4ecda} #tracker .tarea-tt{font:600 12.5px var(--ui);color:#ffd83a;margin-top:7px} @media (max-width:640px){.tarea-op{grid-template-columns:1fr}} /* ---- la misión de fabricar en el banco de trabajo: qué hacer y las piezas marcadas ---- */ #cr-mis{background:#2a2410;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #6a5420;padding:8px 11px 9px;margin-bottom:10px;font:400 13.5px/1.45 var(--ui)}#cr-mis b{display:block;color:#ffe14a;font:700 14px var(--ui);margin-bottom:2px}#cr-mis span{display:block}#cr-mis .crm-p{padding-left:8px}#cr-mis .crm-p img{width:20px;height:20px;image-rendering:pixelated;vertical-align:-5px;margin-right:4px}#cr-mis i{font-style:normal} .slot.pieza{box-shadow:0 0 0 2px #ffe14a} #bag .slot.banco{outline:2px solid #8fe08a;outline-offset:-6px}#bag .slot.banco::before{content:'';position:absolute;inset:0;background:#8fe08a30;pointer-events:none} /* puesto en el banco de trabajo: cerco y velo verdes */ /* ---- intercambio entre jugadores: lo que se vende, su precio, la bolsa para elegir y quién ha aceptado ---- */ #win-cf{z-index:24} /* la ventana de confirmar (invitaciones de grupo o de intercambio…) va siempre encima de las demás */ .box.int-box{width:min(560px,100%)}.int-box h2 .pxi{margin-right:8px} .int-lote{display:flex;align-items:center;gap:12px;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438;padding:8px 10px;margin-bottom:8px} .int-lote .slot{width:52px;height:52px;flex:none}.int-lote b{display:block;font:700 15px var(--ui)}.int-lote small{display:block;color:var(--muted);font:400 12.5px var(--ui);margin-top:2px}.int-lote.vacio{color:#ff8a7a;font:600 13px var(--ui)} .int-form{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:6px 0;font:600 13.5px var(--ui)}.int-form>span{min-width:72px;color:var(--muted)}.int-form small{color:var(--muted);font:400 12.5px var(--ui)} .int-form input{width:96px;font:600 14px var(--ui);color:var(--text);background:#120e18;border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #3a3050;padding:5px 7px;text-align:right} .int-precio{display:flex;align-items:center;gap:10px;font:700 16px var(--ui);margin:4px 0}.int-precio>span{color:var(--muted);font:600 13.5px var(--ui);min-width:72px} .int-info{color:var(--muted);font:400 13px var(--ui);margin:4px 0;min-height:18px}.int-aviso{color:#ff8a7a;font:600 13px var(--ui);margin:8px 0 0}.int-com{margin-top:12px} .int-cuenta{margin-top:10px;border:8px solid transparent;border-image:var(--marco-ch3) 4 / 8px round;background:#2a2410;background-clip:padding-box;padding:2px 6px;font:700 14px/1.4 var(--ui);color:#ffe14a} .int-ok{display:flex;gap:18px;flex-wrap:wrap;font:600 13px var(--ui);margin-top:8px}.int-ok .si{color:#7de07a}.int-ok .no{color:var(--muted)} /* la pestaña de títulos: el actual arriba y los disponibles en tarjetas para elegir */ .lg-actual{background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438;padding:10px 12px 11px} .lg-actual span{display:block;font:600 12px var(--ui);color:var(--muted)}.lg-actual b{display:block;font:700 22px var(--title);margin:2px 0 3px}.lg-actual small{font:400 12.5px var(--ui);color:var(--muted)} .lg-titulos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .lg-tit{display:flex;align-items:center;gap:9px;padding:7px 9px;background:var(--inset);border:2px solid #0d0a11;box-shadow:inset 0 0 0 1px #2c2438;cursor:pointer;text-align:left;color:inherit;font:inherit;min-width:0} .lg-tit:hover{box-shadow:inset 0 0 0 1px #5a4e70}.lg-tit.on{border-color:#e6c64a;box-shadow:inset 0 0 0 1px #8a6a1e} .lg-tit img{width:30px;height:30px;flex:none;image-rendering:pixelated}.lg-tit span{min-width:0}.lg-tit b{display:block;font:700 14px var(--ui)}.lg-tit small{display:block;font:400 11.5px/1.3 var(--ui);color:var(--muted)} .lg-sin{display:block;width:30px;height:30px;flex:none;border:2px dashed #3a3448;box-sizing:border-box} @media (max-width:640px){.lg-titulos{grid-template-columns:1fr 1fr}} /* los recuadros de la ventana de Logros, con su marco de pixel art (--marco-lg0 a 3, js/logros.js): piedra si no hay nada, bronce, plata y oro al completar */ .lg-rama,.lg-dia,.lg-tit,.lg-actual{border:14px solid transparent!important;border-image:var(--marco-lg0) 7 / 14px round!important;background-clip:padding-box!important;box-shadow:none!important} .lg-rama{padding:0 1px 0!important}.lg-dia{padding:0!important}.lg-tit{padding:0!important}.lg-actual{padding:0 2px!important} .lg-rama.m1,.lg-dia.hecho{border-image-source:var(--marco-lg1)!important}.lg-rama.m2{border-image-source:var(--marco-lg2)!important} .lg-rama.m3,.lg-dia.hoy,.lg-tit.on,.lg-actual{border-image-source:var(--marco-lg3)!important}.lg-tit:hover{border-image-source:var(--marco-lg2)!important} /* los escalones de cada rama, con su marco pequeño (--marco-ch0 a 3): los conseguidos en oro, el siguiente en plata y los demás en piedra */ .lg-esc{border:8px solid transparent!important;border-image:var(--marco-ch0) 4 / 8px round!important;background-clip:padding-box!important;padding:1px 2px 2px!important} .lg-esc.ok{border-image-source:var(--marco-ch3)!important}.lg-esc.nt span{font-style:italic;opacity:.7} /* el primer escalón: no da título */.lg-esc.sig{border-image-source:var(--marco-ch2)!important} /* ---- los recuadros de todo el juego, con el marco de pixel art de los de Logros: --marco-lg0 a 3 (piedra, bronce, plata y oro; js/logros.js) para los grandes y --marco-ch0 a 3 para los pequeños. El marco ocupa 14 px (8 los pequeños), así que el relleno de dentro es menor que antes: el texto queda donde estaba. Lo pidió el 2026-10-14: «revisa todos los sitios donde hay recuadros simples y hazlos bonitos». La ventana de habilidades se queda como está (así la quiere); las casillas de objetos, las barras, los campos de texto y las zonas de soltar (con borde a rayas) tampoco cambian ---- */ .card,#q-body .q-obj,#q-body .q-rec,#cr-mis,.int-lote,.pase-est,.dia-card,.cu-pj,.cu-clase,.preview{border:14px solid transparent!important;border-image:var(--marco-lg0) 7 / 14px round!important;background-clip:padding-box!important;box-shadow:none!important} .card{padding:0 2px 1px!important}#q-body .q-obj,#q-body .q-rec{padding:0 2px 1px!important}#cr-mis{padding:0 2px 1px!important;border-image-source:var(--marco-lg3)!important} .int-lote{padding:0 2px!important}.pase-est{padding:0 2px!important}.dia-card{padding:0 0 2px!important} .cu-pj{padding:0!important}.cu-clase{padding:0 2px 2px!important}.preview{min-height:130px!important} .cu-clase canvas{margin-top:-2px!important}.cu-pj canvas{margin-top:-2px!important} /* el dibujo, dentro del marco (antes asomaba por arriba la punta del bastón) */ .card.on,.pase-est.on,.dia-card.mejor,.cu-clase.on{border-image-source:var(--marco-lg3)!important} .cu-clase:hover:not(.on),.cu-pj.vacio:hover{border-image-source:var(--marco-lg2)!important} /* las dos mejoras de cada escalón del árbol de honor van dentro del recuadro del escalón: con el marco pequeño, para que no pese tanto */ .hon-op{border:8px solid transparent!important;border-image:var(--marco-ch0) 4 / 8px round!important;background-clip:padding-box!important;box-shadow:none!important;padding:2px 3px!important} .hon-op.on{border-image-source:var(--marco-ch3)!important}.hon-op:hover:not(:disabled):not(.on){border-image-source:var(--marco-ch2)!important} .pvp-sube,.cu-aviso{border:8px solid transparent!important;border-image:var(--marco-ch3) 4 / 8px round!important;background-clip:padding-box!important;box-shadow:none!important} .pvp-sube{padding:0 4px!important}.cu-aviso{padding:2px 4px!important;border-image-source:var(--marco-ch1)!important} /* las pestañas del joyero, con el marco fino de los botones (como las demás pestañas) */ .jw-tab{border-image:var(--marco-b) 5 / 10px stretch;background-clip:padding-box;box-shadow:none}.jw-tab.on{border-image-source:var(--marco-b-on);box-shadow:none}.jw-tab:hover:not(.on){border-image-source:var(--marco-b-on)}