/* Menú principal 0.42, estilo Victory Road (game.js: renderMenu y renderGroup). Azul intenso con bandas de luz en diagonal, placas blancas
   cortadas en diagonal con un bloque de color a la izquierda, amarillo para lo que se pulsa primero y la cinta de noticias abajo. Sin fondos
   pintados: formas CSS y SVG, y la letra pixel del juego (InaPixel) en todo */
:root{--vr-blue:#0b3a9e;--vr-blue2:#061c57;--vr-plate:#f5f8ff;--vr-ink:#0a1d4f;--vr-sub:#4a5b8c;--vr-yel:#ffd23c;--vr-red:#ff3d5a;--vr-hal:#ff7a1a;--vr-hal2:#2a0d45}
#screen:has(>.card.vr-screen){background:linear-gradient(118deg,rgba(255,255,255,0) 0 50%,rgba(255,255,255,.08) 50% 60%,rgba(255,255,255,0) 60% 65%,rgba(255,255,255,.05) 65% 69%,rgba(255,255,255,0) 69%),radial-gradient(90% 40% at 85% 8%,rgba(0,168,255,.35),rgba(0,0,0,0) 70%),linear-gradient(170deg,var(--vr-blue),var(--vr-blue2) 72%)!important}
#screenBody.card.vr-screen{max-width:520px;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;padding:0;gap:0}
#screenBody .vr *{text-shadow:none}
.card.vr-screen .page-content{padding:0;gap:0;overflow:hidden}
.vr{display:flex;flex-direction:column;gap:8px;min-height:100%;height:100%;color:var(--vr-ink);font-family:var(--font-ui);letter-spacing:0}
.vr button,.vr a{font:inherit;color:inherit;cursor:pointer;margin:0;text-decoration:none}
.vr button:focus-visible,.vr a:focus-visible{outline:3px solid var(--vr-yel);outline-offset:2px}
.vr .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#screenBody .vr .t,#screenBody .vr h2,#screenBody .vr .vr-cont b,#screenBody .vr .dk span{font-weight:normal;text-transform:uppercase;text-shadow:2px 2px 0 rgba(10,29,79,.18)}
.vr .s{font-weight:normal;font-size:11px;line-height:1.3;color:var(--vr-sub)}

/* Portada */
.vr-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.vr-logo{height:40px;width:auto;image-rendering:pixelated}
.vr-wal{display:flex;gap:5px}
.vr-wal>span{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:var(--vr-plate);color:var(--vr-ink);padding:3px 11px 3px 9px;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.vr-wal>span:first-child b{color:#b07800}
.vr-wal .menu-icon{width:14px;height:14px}
.vr-cont{flex:none;min-height:44px;border:0;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--vr-yel);color:var(--vr-ink);padding:7px 18px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);text-align:left}
.vr-cont b{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-cont small{font-size:10px;flex:none}
.vr-cont .hearts{color:var(--vr-red)}
.vr-pl{position:relative;border:0;padding:0;text-align:left;background:none;filter:drop-shadow(3px 4px 0 rgba(2,8,30,.55));flex:none;display:block;width:100%}
.vr-pl .face{position:absolute;inset:0;background:var(--vr-plate);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);overflow:hidden}
.vr-pl .blk{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--c);clip-path:polygon(10% 0,100% 0,80% 100%,0 100%);overflow:hidden}
.vr-pl .blk::after,.rp .blk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,rgba(255,255,255,.2) 0 5px,rgba(255,255,255,0) 5px 15px)}
.vr-pl .t{position:absolute;left:42%;right:6%;color:var(--vr-ink);line-height:.95}
.vr-pl .s{position:absolute;left:42.5%;right:9%}
.vr-pl .chev{position:absolute;right:7%;top:50%;transform:translateY(-50%) skewX(-12deg);width:16px;height:22px;background:var(--c);clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%)}
.vr-pl .art{position:absolute;z-index:1;left:2%;top:50%;transform:translateY(-50%);width:34%;height:auto}
.vr-big{flex:1 1 auto;min-height:150px}
.vr-big .t{top:16%;font-size:34px}
.vr-big .s{top:46%}
.vr-big .emb{left:-1%;width:41%;max-height:84%;object-fit:contain;filter:drop-shadow(4px 5px 0 rgba(10,29,79,.55));image-rendering:pixelated}
.vr-big .vr-modes{position:absolute;left:42.5%;right:6%;bottom:9%;display:flex;flex-wrap:wrap;gap:3px}
.vr-big .vr-modes span{display:inline-block;width:auto;font-size:9px;color:#fff;background:var(--vr-ink);padding:1px 7px;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.vr-big .face::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-18deg)}
@media (prefers-reduced-motion:no-preference){.vr-big .face::after{animation:vr-shine 4.5s ease-in-out infinite}@keyframes vr-shine{0%,60%{left:-60%}85%,100%{left:130%}}}
.vr-mid{height:clamp(96px,18vh,150px)}
.vr-mid .t{top:16%;font-size:26px}
.vr-mid .s{top:58%}
.vr-vs{display:flex!important;align-items:center;justify-content:center;gap:2px;width:38%!important}
.vr-vs img,.vr-vs canvas{width:42%;height:auto;image-rendering:pixelated}
.vr-vs i{font-style:normal;font-size:20px;color:#fff;text-shadow:2px 2px 0 var(--vr-ink),-1px -1px 0 var(--vr-ink)}
.vr-slim{height:52px}
.vr-slim .blk{width:25%}
.vr-slim .art{width:21%;left:1.5%}
.vr-slim .t{left:27%;top:50%;transform:translateY(-50%);font-size:17px;right:auto}
.vr-slim .s{left:auto;right:14%;top:50%;transform:translateY(-50%);text-align:right}
.vr .badge{position:absolute;z-index:2;top:6px;right:9%;font-size:10px;background:var(--vr-red);color:#fff;padding:0 8px;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.vr-dock{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;flex:none}
.vr .dk{position:relative;border:0;height:44px;background:var(--vr-plate);color:var(--vr-ink);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;padding:0 10px}
.vr .dk .menu-icon{width:18px;height:18px;flex:none}
.vr .dk.gold{background:var(--vr-yel)}
.vr .dk .dot{position:absolute;top:6px;right:14%;width:8px;height:8px;border-radius:50%;background:var(--vr-red)}
.vr-tick{display:flex;align-items:stretch;height:30px;flex:none;background:var(--vr-yel);color:var(--vr-ink);overflow:hidden;margin-top:auto}
.vr-tick .k{flex:none;display:flex;align-items:center;gap:5px;padding:0 14px 0 10px;background:var(--vr-hal2);color:#fff;font-size:10.5px;text-transform:uppercase;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.vr-tick .k b{color:var(--vr-hal);font-weight:normal}
.vr-pumpkin{width:16px;height:16px;flex:none}
.vr-tick .run{flex:1;overflow:hidden;display:flex;align-items:center;white-space:nowrap;font-size:10.5px;text-transform:uppercase}
.vr-tick .run>span{display:inline-block;padding-left:100%}
.vr-tick .run .vr-sep{display:inline-block;width:6px;height:6px;margin:0 12px;background:var(--vr-red);transform:rotate(45deg);vertical-align:middle}   /* rombo dibujado (sin símbolos de texto: F42) */
@media (prefers-reduced-motion:no-preference){.vr-tick .run>span{animation:vr-tick 22s linear infinite}@keyframes vr-tick{to{transform:translateX(-100%)}}}
@media (prefers-reduced-motion:reduce){.vr-tick .run>span{padding-left:10px}}

/* 0.50 (Temporada 1): portada de doble pantalla (opción A1 de la encuesta, renderMenu). Arriba la torre de hierro con el logo y la cartera
   (de noche en Halloween: .hw), la bisagra de la consola, abajo el menú en una ventana de DS y la cinta de noticias al final */
#screenBody .vr-home.vr-ds{gap:0;color:#fff}
#screenBody .vr-ds .ds-top{position:relative;flex:none;height:clamp(150px,25vh,212px);overflow:hidden}
#screenBody .vr-ds .ds-ill{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;image-rendering:pixelated}
#screenBody .vr-ds .ds-logo{position:absolute;left:50%;top:17%;transform:translateX(-50%);width:min(52%,210px);height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55));image-rendering:pixelated}
#screenBody .vr-ds .ds-wal{position:absolute;right:8px;top:8px;flex-direction:column;align-items:flex-end;gap:5px;z-index:1}
#screenBody .vr-ds .ds-wal>span{clip-path:none;background:rgba(8,14,40,.72);color:#fff;border:2px solid rgba(255,255,255,.75);border-radius:16px;padding:2px 10px 2px 5px;font-size:13px}
#screenBody .vr-ds .ds-wal>span:first-child b{color:#fff}
#screenBody .vr-ds .ds-wal .menu-icon{width:17px;height:17px}
#screenBody .vr-ds.hw .ds-wal>span{background:rgba(26,6,40,.78);border-color:#ffb35c}
#screenBody .vr-ds.hw .ds-ill{filter:hue-rotate(235deg) saturate(1.25) brightness(.52) contrast(1.1)}
#screenBody .vr-ds .ds-night{position:absolute;inset:0;background:linear-gradient(rgba(40,8,70,.55),rgba(80,20,110,.25) 55%,rgba(255,110,30,.35) 92%)}
#screenBody .vr-ds .ds-moon{position:absolute;right:30px;top:44%;width:40px;height:40px;border-radius:50%;background:#f4f1c9;box-shadow:0 0 22px 6px rgba(244,241,201,.45),inset -8px -5px 0 rgba(200,190,140,.6)}
#screenBody .vr-ds .ds-bat{position:absolute;width:30px;height:13px}
#screenBody .vr-ds .ds-bat svg,#screenBody .vr-ds .ds-pk svg{width:100%;height:100%;display:block}
#screenBody .vr-ds .ds-pk{position:absolute;bottom:6px;filter:drop-shadow(0 0 6px rgba(255,140,40,.8))}
#screenBody .vr-ds .ds-web{position:absolute;left:0;top:0;width:80px;height:80px;opacity:.55}
#screenBody .vr-ds .ds-hinge{flex:none;height:22px;background:linear-gradient(#3a3c46,#1f2027);border-top:2px solid #000;border-bottom:2px solid #000;display:flex;align-items:center;gap:8px;padding:0 14px}
#screenBody .vr-ds .ds-hinge .led{width:7px;height:7px;border-radius:50%;background:#46e07a;box-shadow:0 0 6px #46e07a}
#screenBody .vr-ds .ds-hinge .led.o{background:#ff9a3c;box-shadow:0 0 6px #ff9a3c}
#screenBody .vr-ds .ds-hinge .spk{margin-left:auto;width:56px;height:8px;background:radial-gradient(circle,#0b0b10 1.5px,transparent 2px) 0 0/8px 8px}
#screenBody .vr-ds .ds-bot{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#0d2a78 url(ui/bg_title.png) center/cover;image-rendering:pixelated}
#screenBody .vr-ds.hw .ds-bot{background:linear-gradient(rgba(42,13,69,.86),rgba(20,6,36,.94)),url(ui/bg_title.png) center/cover}
#screenBody .vr-ds .ds-win{background:linear-gradient(#3f86f2,#1d48b8);border:3px solid #fff;border-radius:8px;box-shadow:0 0 0 2px #0a1d5c,3px 4px 0 rgba(0,0,0,.45);color:#fff}
#screenBody .vr-ds.hw .ds-win{background:linear-gradient(#6a2bb0,#3b1766);border-color:#ffb35c;box-shadow:0 0 0 2px #1a0630,3px 4px 0 rgba(0,0,0,.5)}
#screenBody .vr-ds .ds-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-around;gap:3px;padding:6px}
#screenBody .vr-ds .ds-row{position:relative;flex:1 1 0;min-height:42px;max-height:78px;display:flex;align-items:center;gap:11px;border:0;border-radius:5px;background:none;padding:4px 12px 4px 14px;text-align:left;color:#fff}
#screenBody .vr-ds .ds-row .pxi{width:30px;height:30px;flex:none}
#screenBody .vr-ds .ds-row b{font-size:21px;font-weight:700;white-space:nowrap;color:inherit;text-transform:none;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
#screenBody .vr-ds .ds-row.main b{text-shadow:none}
#screenBody .vr-ds .ds-row small{margin-left:auto;font-size:10px;line-height:1.3;color:#dbe8ff;text-align:right;max-width:48%}
#screenBody .vr-ds .ds-row .hand{position:absolute;left:9px;top:50%;transform:translateY(-50%);display:none}
#screenBody .vr-ds .ds-row .hand .pxi{width:20px;height:20px}
#screenBody .vr-ds .ds-row.main{background:var(--vr-yel);color:#1a1d33;padding-left:38px}
#screenBody .vr-ds .ds-row.main small{color:#4a3b00}
#screenBody .vr-ds .ds-row.main .hand{display:block}
#screenBody .vr-ds .ds-row.cont{background:rgba(255,255,255,.17)}
#screenBody .vr-ds .ds-row:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--vr-yel);padding-left:38px}
#screenBody .vr-ds .ds-row:focus-visible .hand{display:block}
#screenBody .vr-ds .ds-list:focus-within .ds-row.main:not(:focus-visible){padding-left:14px}
#screenBody .vr-ds .ds-list:focus-within .ds-row.main:not(:focus-visible) .hand{display:none}
#screenBody .vr-ds .ds-row .badge{position:static;margin-left:8px;flex:none;background:var(--vr-red);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
#screenBody .vr-ds .ds-hwb{font-style:normal;font-size:10px;background:#ff7a1a;color:#1a0b2e;padding:3px 7px;border-radius:3px}
#screenBody .vr-ds.hw .ds-row.main{background:#ff8a2a;color:#1a0630}
#screenBody .vr-ds.hw .ds-row.main small{color:#3a1400}
#screenBody .vr-ds.hw .ds-row:focus-visible{box-shadow:inset 0 0 0 3px #ffb35c}
#screenBody .vr-ds .ds-soft{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#screenBody .vr-ds .ds-soft>*{position:relative;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;padding:0 8px;border-radius:8px;color:#fff}
#screenBody .vr-ds .ds-soft .pxi{width:18px;height:18px;flex:none}
#screenBody .vr-ds .ds-soft .dot{position:absolute;top:6px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--vr-red)}
/* 0.50: con el código de regalo son tres; en horizontal, más justos para que «Novedades» quepa */
@media (orientation:landscape){#screenBody .vr-ds .ds-soft{gap:6px}#screenBody .vr-ds .ds-soft>*{font-size:12px;gap:5px;padding:0 4px}#screenBody .vr-ds .ds-soft .pxi{width:15px;height:15px}}
#screenBody .vr-ds .vr-tick{height:34px;margin-top:0;background:#0a0f24;color:#fff;border-top:3px solid var(--vr-yel)}
#screenBody .vr-ds .vr-tick .k{background:var(--vr-yel);color:#1a1d33;padding-right:20px}
#screenBody .vr-ds .vr-tick .k b{color:#1a1d33}
#screenBody .vr-ds .vr-tick .k .pxi{width:16px;height:16px}
#screenBody .vr-ds .vr-tick .run .vr-sep{background:var(--vr-yel)}
#screenBody .vr-ds.hw .vr-tick{background:#14051f;border-top-color:#ff8a2a}
#screenBody .vr-ds.hw .vr-tick .k{background:#ff8a2a;color:#1a0630}
#screenBody .vr-ds.hw .vr-tick .k b{color:#1a0630}
#screenBody .vr-ds.hw .vr-tick .run .vr-sep{background:#ff8a2a}
/* Pantallas bajas (360×640): la de arriba, más baja todavía */
@media (max-height:680px){#screenBody .vr-ds .ds-top{height:clamp(120px,22vh,160px)}.vr-ds .ds-row b{font-size:17px}.vr-ds .ds-row{min-height:38px}}
/* Horizontal (móvil tumbado): las dos pantallas una al lado de la otra y la cinta debajo */
@media (orientation:landscape) and (max-height:560px){
  #screenBody .vr-home.vr-ds{display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:minmax(0,1fr) auto;gap:0}
  #screenBody .vr-ds .ds-top{grid-column:1;grid-row:1;height:auto}
  #screenBody .vr-ds .ds-hinge{display:none}
  #screenBody .vr-ds .ds-bot{grid-column:2;grid-row:1;padding:8px 10px}
  #screenBody .vr-ds .vr-tick{grid-column:1/-1}
  #screenBody .vr-ds .ds-row{min-height:34px}.vr-ds .ds-row b{font-size:16px}
}

/* Pantallas de grupo */
.vr-sh{flex:none;display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:12px 12px 18px;background:var(--c);clip-path:polygon(0 0,100% 0,100% 76%,0 100%)}
.vr-sh h2{margin:0;font-size:22px;color:#fff;font-family:var(--font-ui);display:block;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
.vr-bk{border:0;background:var(--vr-plate);color:var(--vr-ink);font-size:11px;padding:4px 16px;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);display:inline-flex;align-items:center;gap:4px;min-height:44px}
.vr-bk svg{width:14px;height:14px}
.vr-list{display:grid;gap:7px;min-height:0;flex:1;align-content:start;overflow:auto;padding:0 4px 8px 0;scrollbar-width:thin}
.vr-list .duo{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rp{position:relative;border:0;text-align:left;background:none;padding:0;min-height:62px;filter:drop-shadow(3px 4px 0 rgba(2,8,30,.5));display:flex;align-items:center;width:100%}
.rp .face{position:absolute;inset:0;background:var(--vr-plate);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
.rp .blk{position:absolute;left:0;top:0;bottom:0;width:64px;background:var(--c);clip-path:polygon(16% 0,100% 0,80% 100%,0 100%);overflow:hidden}
.rp .ic{position:absolute;z-index:1;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;color:#fff;filter:drop-shadow(2px 2px 0 rgba(10,29,79,.55));display:flex}
.rp .ic svg{width:100%;height:100%}
.rp .tx{position:relative;flex:1;min-width:0;display:grid;gap:2px;padding:10px 34px 10px 72px}
.rp .t{font-size:15px;color:var(--vr-ink);line-height:1.05}
.rp .s{font-size:9.5px}
.rp .pbar{display:block;height:8px;margin-top:5px;background:#d6def4;transform:skewX(-14deg);overflow:hidden;max-width:92%}
.rp .pbar i{display:block;height:100%;background:var(--c)}
.rp .btn{justify-self:start;margin-top:6px;font-size:10px;text-transform:uppercase;background:var(--vr-yel);color:var(--vr-ink);padding:3px 14px;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.rp .meta{position:absolute;right:8%;top:50%;transform:translateY(-50%);font-size:12px;color:var(--c)}
.rp .badge{right:8%}
.rp.hero{min-height:100px}
.rp.hero .blk{width:92px}
.rp.hero .ic{width:50px;height:50px;left:18px}
.rp.hero .tx{padding-left:102px}
.rp.hero .t{font-size:19px}
.rp.sm{min-height:74px}
.rp.sm .blk{width:42px}
.rp.sm .ic{width:22px;height:22px;left:9px}
.rp.sm .tx{padding:9px 12px 9px 48px}
.rp.sm .t{font-size:12px}
.rp.sm .s{font-size:8.5px}
.rp.lock .face{background:#c6cfe8}
.rp.lock .blk{background:#7c88ad}
.rp.lock .t,.rp.lock .s{color:#5d6789}
.rp .lk{position:absolute;z-index:1;right:7%;top:8px;width:16px;height:16px;color:#5d6789;display:flex}
.rp .lk svg{width:100%;height:100%}
.rp .run-on{color:#c04a00}
#screenBody .vr-sh .vr-abandon{margin-left:auto;min-height:44px;border:0;background:rgba(0,0,0,.28);color:#fff;font-size:10px;padding:4px 14px;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}   /* en la cabecera de Jugar (44 px; antes .card .ghost lo dejaba en 40) */
/* 0.50 (Temporada 1): pantallas de grupo con la G3 elegida («cartuchos», .vr-dsg, que lleva también .vr-ds para la pantalla de arriba, la
   bisagra y la de abajo de la portada). Arriba, la ilustración del grupo, más baja; abajo, cada placa (.rp) es una tarjeta de DS con la
   franja del color del grupo: las principales a lo ancho, con icono grande, y las de .duo de dos en dos, con el icono arriba */
#screenBody .vr-group.vr-dsg{gap:0;color:#fff}
#screenBody .vr-ds.vr-dsg .ds-top{height:clamp(104px,15vh,128px)}
#screenBody .vr-dsg .ds-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 35%,rgba(4,10,32,.8))}
#screenBody .vr-dsg .ds-back{position:absolute;left:8px;top:8px;z-index:2;clip-path:none;border-radius:16px;background:#fff;color:#1a1d33;min-height:44px;padding:3px 14px 3px 10px;box-shadow:2px 3px 0 rgba(0,0,0,.4)}
#screenBody .vr-dsg .ds-wal{flex-direction:row}
#screenBody .vr-dsg .ds-title{position:absolute;left:12px;bottom:8px;margin:0;z-index:1;display:flex;align-items:center;gap:9px;font-size:26px;font-weight:700;color:#fff;text-transform:none;text-shadow:3px 3px 0 rgba(0,0,0,.55)}
#screenBody .vr-dsg .ds-title .chip{width:12px;height:26px;border-radius:3px;background:var(--c);box-shadow:0 0 0 2px #fff}
#screenBody .vr-dsg .ds-top .vr-abandon{position:absolute;right:8px;bottom:8px;z-index:2;min-height:44px;clip-path:none;border:2px solid #fff;border-radius:6px;background:rgba(8,14,40,.75);color:#fff;font-size:10px;padding:4px 10px}
#screenBody .vr-dsg .ds-bot{padding:10px 12px 12px;gap:9px}
#screenBody .vr-dsg .vr-cont{flex:none;clip-path:none;border-radius:8px;border:3px solid #fff;box-shadow:0 0 0 2px #0a1d5c,3px 4px 0 rgba(0,0,0,.45);background:var(--vr-yel);color:#1a1d33}
#screenBody .vr-dsg .vr-cont b,#screenBody .vr-dsg .vr-cont small{color:#1a1d33;text-shadow:none}
#screenBody .vr-dsg .vr-list,#screenBody .vr-dsg .vr-list.fill{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(64px,150px);align-content:start;gap:9px;padding:0 2px 4px 0;overflow:auto}
#screenBody .vr-dsg .vr-list .duo{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#screenBody .vr-dsg .vr-list.fill .rp.hero{grid-row:auto}
#screenBody .vr-dsg .rp{filter:none;min-height:64px;height:100%;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 20px;width:100%}
#screenBody .vr-dsg .rp .face{clip-path:none;border-radius:8px;border:3px solid #fff;background:linear-gradient(#3f86f2,#1d48b8);box-shadow:0 0 0 2px #0a1d5c,3px 4px 0 rgba(0,0,0,.45)}
#screenBody .vr-dsg .rp .blk{clip-path:none;left:3px;top:3px;bottom:3px;width:7px;border-radius:5px 0 0 5px;background:var(--c)}
#screenBody .vr-dsg .rp .blk::after{display:none}
#screenBody .vr-dsg .rp .ic{position:relative;left:auto;top:auto;transform:none;flex:none;width:40px;height:40px;z-index:1;filter:none}
#screenBody .vr-dsg .rp .tx{position:relative;z-index:1;flex:1;min-width:0;padding:0;gap:3px}
#screenBody .vr-dsg .rp .t{font-size:20px;font-weight:700;color:#fff;text-transform:none;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
#screenBody .vr-dsg .rp .s{font-size:10px;color:#dbe8ff}
#screenBody .vr-dsg .rp .meta{position:relative;right:auto;top:auto;transform:none;z-index:1;margin-left:auto;font-size:12px;color:#ffd23c}
/* 0.52.16 (f14389): con el móvil en horizontal, la placa es estrecha y un título largo («Rogue Expedition») pasaba por debajo del récord (0/9): ahí no sale; en vertical, sí */
@media (orientation:landscape) and (max-height:560px){#mRogue.rp .meta{display:none}}
#screenBody .vr-dsg .rp .pbar{transform:none;border-radius:4px;background:rgba(0,0,0,.3);height:7px}
#screenBody .vr-dsg .rp .pbar i{background:#ffd23c}
#screenBody .vr-dsg .rp .btn{border-radius:4px}
#screenBody .vr-dsg .rp .run-on{color:#ffd23c}
#screenBody .vr-dsg .rp .badge{position:relative;right:auto;z-index:1}
#screenBody .vr-dsg .rp .lk{right:10px;top:10px;color:#e3e8f5;z-index:1}
#screenBody .vr-dsg .duo .rp{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:10px 12px 10px 20px}
#screenBody .vr-dsg .duo .rp .ic{width:34px;height:34px}
#screenBody .vr-dsg .duo .rp .tx{flex:none;width:100%}
#screenBody .vr-dsg .duo .rp .t{font-size:16px}
#screenBody .vr-dsg .rp.lock .face{background:linear-gradient(#6f7fa8,#4b5a85);border-color:#c8d0e6}
#screenBody .vr-dsg .rp.lock .t,#screenBody .vr-dsg .rp.lock .s{color:#e3e8f5}
#screenBody .vr-dsg .rp:focus-visible{outline:none}
#screenBody .vr-dsg .rp:focus-visible .face{border-color:var(--vr-yel);box-shadow:0 0 0 3px var(--vr-yel),3px 4px 0 rgba(0,0,0,.45)}
#screenBody .vr-dsg.hw .rp .face{background:linear-gradient(#6a2bb0,#3b1766);border-color:#ffb35c;box-shadow:0 0 0 2px #1a0630,3px 4px 0 rgba(0,0,0,.5)}
#screenBody .vr-dsg.hw .rp.hw-plate .face{background:linear-gradient(#ffad5a,#ff7a1a)}
#screenBody .vr-dsg.hw .rp.hw-plate .t{color:#1a0630;text-shadow:none}#screenBody .vr-dsg.hw .rp.hw-plate .s{color:#3a1400}
/* 0.52.16 (AnZonY: con mando «solo se ve un borde azul en las esquinas», p. ej. en la Noche de Halloween): la placa elegida, con mando o con
   teclado, con borde blanco, halo amarillo y más luz. Con mando el foco no es :focus-visible y el contorno cian del mando lo recortaba la
   placa; y en Halloween el borde naranja del evento tapaba el amarillo del foco */
.pad-active #screenBody .vr-dsg .rp:focus{outline:none!important;box-shadow:none!important}
.pad-active #screenBody .vr-dsg .rp:focus .face,#screenBody .vr-dsg .rp:focus-visible .face{border-color:#fff;box-shadow:0 0 0 4px var(--vr-yel),0 0 18px 4px rgba(255,210,60,.7),3px 4px 0 rgba(0,0,0,.45);filter:brightness(1.12)}
#screenBody .vr-dsg.hw .rp.lock .face{background:linear-gradient(#5a4a78,#3d2f58);border-color:#b9a6d6}
#screenBody .vr-dsg.hw .vr-cont{border-color:#ffb35c;box-shadow:0 0 0 2px #1a0630}
/* Pantallas bajas: las tarjetas pequeñas, en horizontal; sin la etiqueta «Continuar» dentro de la tarjeta (sí en la franja de arriba) */
@media (max-height:800px){
  #screenBody .vr-dsg .rp{padding:6px 10px 6px 18px;gap:10px}
  #screenBody .vr-dsg .rp .ic{width:32px;height:32px}
  #screenBody .vr-dsg .rp .t{font-size:17px}
  #screenBody .vr-dsg .rp .btn{display:none}
  #screenBody .vr-dsg .duo .rp{flex-direction:row;align-items:center;gap:8px;padding:6px 8px 6px 16px}
  #screenBody .vr-dsg .duo .rp .ic{width:26px;height:26px}
  #screenBody .vr-dsg .duo .rp .tx{flex:1;width:auto}
  #screenBody .vr-dsg .duo .rp .t{font-size:13px}
  #screenBody .vr-dsg .duo .rp .s{font-size:9px}
  #screenBody .vr-dsg .vr-list,#screenBody .vr-dsg .vr-list.fill{grid-auto-rows:minmax(52px,140px)}
}
@media (orientation:landscape) and (max-height:560px){
  #screenBody .vr-group.vr-ds{display:grid;grid-template-columns:1fr 1.35fr;grid-template-rows:minmax(0,1fr);gap:0}
  #screenBody .vr-ds.vr-dsg .ds-top{grid-column:1;grid-row:1;height:auto}
  #screenBody .vr-dsg .ds-bot{grid-column:2;grid-row:1;padding:8px 10px}
  #screenBody .vr-dsg .vr-list,#screenBody .vr-dsg .vr-list.fill{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(48px,1fr);align-content:stretch}
  #screenBody .vr-dsg .vr-list .duo{display:contents}
  #screenBody .vr-dsg .ds-wal{flex-direction:column;align-items:flex-end}
  #screenBody .vr-dsg .rp .ic,#screenBody .vr-dsg .duo .rp .ic{width:26px;height:26px}
  #screenBody .vr-dsg .rp .t,#screenBody .vr-dsg .duo .rp .t{font-size:14px}
  #screenBody .vr-dsg .rp .run-name,#screenBody .vr-dsg .rp .run-step{display:none}   /* tumbado, solo «En curso» */
  #screenBody .vr-dsg .vr-list>.rp.wide{grid-column:1/-1}
}

.vr-list.fill{grid-auto-rows:minmax(64px,1fr);align-content:stretch}
.vr-list.fill .rp.hero{grid-row:span 2}
.vr-list.fill .rp.hero .blk{width:112px}
.vr-list.fill .rp.hero .ic{width:66px;height:66px;left:20px}
.vr-list.fill .rp.hero .tx{padding-left:124px}
.vr-list.fill .rp.hero .t{font-size:17px}
.vr-list.fill .rp .t{font-size:16px}

/* Bajo (móvil pequeño): todo un poco más compacto */
@media (max-height:700px){
  .vr{gap:6px}
  .vr-big{min-height:120px}.vr-big .t{font-size:28px}.vr-big .vr-modes span{font-size:8px}
  .vr-mid .t{font-size:22px}.vr-slim{height:46px}
  .rp.hero{min-height:84px}.rp.sm{min-height:64px}.rp{min-height:56px}
}
/* Horizontal: portada en dos columnas (Jugar a la izquierda) y las listas de grupo en dos columnas */
@media (orientation:landscape) and (max-height:560px){
  .card.vr-screen{max-width:980px}
  .vr-list{grid-template-columns:1fr 1fr}
  .vr-list .duo{grid-column:span 1}
  .vr-list.fill{grid-auto-rows:minmax(56px,1fr)}
  .rp.hero{min-height:76px}.rp.hero .t{font-size:16px}
}
/* Jugar: las placas se estiran para llenar la pantalla (Historia y Expedición, más altas) */
@media (orientation:portrait),(min-height:561px){
  .g-play .vr-list{grid-template-rows:1.5fr 1.5fr 1fr 1fr .9fr auto;align-content:stretch}
  .g-play .vr-list>.rp,.g-play .vr-list>.duo,.g-play .vr-list .duo>.rp{min-height:0;height:100%}
}

/* ---------- Tienda 0.42 (Sobres, Gacha y Jugadores) con el estilo del menú ---------- */
#screen:has(>.card.shop-screen){background:linear-gradient(118deg,rgba(255,255,255,0) 0 50%,rgba(255,255,255,.08) 50% 60%,rgba(255,255,255,0) 60% 65%,rgba(255,255,255,.05) 65% 69%,rgba(255,255,255,0) 69%),linear-gradient(170deg,var(--vr-blue),var(--vr-blue2) 72%)!important}
#screenBody.card.paged.shop-screen{display:flex;flex-direction:column;gap:8px;max-width:520px;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;padding:0}
#screenBody.shop-screen>.page-heading.top{display:flex;align-items:center;gap:10px;margin:0;padding:12px 12px 18px;background:#e0a400;clip-path:polygon(0 0,100% 0,100% 76%,0 100%);border:0;box-shadow:none}
#screenBody.shop-screen>.page-heading h2{color:#fff;text-transform:uppercase;font-size:22px;margin:0;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
#screenBody.shop-screen>.page-heading h2 .menu-icon{display:none}
#screenBody.shop-screen>.page-heading .back{border:0;background:var(--vr-plate);color:var(--vr-ink);font-size:11px;padding:4px 14px;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);box-shadow:none;min-height:44px;width:auto}
#screenBody.shop-screen>.view-toolbar#tt.shop-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0 4px;background:none;border:0}
#screenBody.shop-screen #tt.shop-tabs [role=tab]{background:rgba(255,255,255,.13);color:#fff;border:0;border-radius:0;box-shadow:none;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);text-transform:uppercase;font-size:12px;min-height:44px;padding:6px 4px}
#screenBody.shop-screen #tt.shop-tabs [role=tab][aria-selected=true]{background:var(--vr-yel);color:var(--vr-ink)}
#screenBody.shop-screen .runbar.wallet{align-self:flex-end;background:var(--vr-plate);color:var(--vr-ink);border:0;box-shadow:none;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);padding:3px 14px;font-size:12px;margin:0 4px}
#screenBody.shop-screen .page-content{padding:0 4px 4px}
#screenBody.shop-screen .view-actions{border:0;padding:4px}
#screenBody.shop-screen .shop-head .eyebrow{color:#fff}
#screenBody.shop-screen .shop-head small{color:#cdd8ff}
/* Gacha: cabecera del equipo del día y lista de probabilidades */
.gd{display:flex;flex-direction:column;gap:6px;min-height:0}
.gd-team{position:relative;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--vr-plate);color:var(--vr-ink);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);filter:drop-shadow(3px 4px 0 rgba(2,8,30,.5))}
.gd-team img.crest,.gd-team canvas{width:64px;height:64px;flex:none;image-rendering:pixelated}
.gd-txt{display:grid;gap:2px;min-width:0}
.gd-tag{justify-self:start;background:var(--vr-red);color:#fff;font-size:10px;padding:1px 10px;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.gd-txt b{font-size:22px;text-transform:uppercase;line-height:1.05;color:var(--vr-ink)}
.gd-txt small{font-size:10px;color:var(--vr-sub)}
.gd-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;overflow:auto;min-height:0;scrollbar-width:thin}
.gd-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 14px 4px 10px;background:rgba(245,248,255,.94);color:var(--vr-ink);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);font-size:12px}
.gd-row .rar{display:block;text-align:center;font-size:9px;padding:2px 0;text-transform:uppercase}
.gd-n{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-n .ok{color:#18a058}.gd-n small{text-transform:none;color:var(--vr-sub);font-size:9px}
.gd-p{font-size:12px}
.gd-tech{background:#fff5d6}
.gd-note{margin:2px 0 0;font-size:10px;color:#fff;background:rgba(124,136,173,.75);padding:4px 10px;text-transform:uppercase}
#screenBody.shop-screen .gd-pull{width:100%;border:0;background:var(--vr-yel);color:var(--vr-ink);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);font-size:22px;min-height:62px;display:grid;place-items:center;gap:0;text-transform:uppercase;box-shadow:none}
#screenBody.shop-screen .gd-pull small{font-size:10px;text-transform:none}
#screenBody.shop-screen .gd-pull.short{background:#c6cfe8}
#screenBody.shop-screen .gd-pulls{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
#screenBody.shop-screen .gd-pulls .gd-pull{font-size:17px;min-height:58px;padding:4px 6px}
/* Sobres: placas blancas por saga, con «Se puede vender» y los tres sobres en bloques de color */
#screenBody.shop-screen .sg-row{position:relative;background:var(--vr-plate);border:0;box-shadow:none;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);padding:8px 14px 10px;filter:drop-shadow(3px 4px 0 rgba(2,8,30,.5))}
#screenBody.shop-screen .sg-txt b{color:var(--vr-ink);text-transform:uppercase;font-size:15px}
#screenBody.shop-screen .sg-txt small{color:var(--vr-sub);font-size:10px}
/* 0.50: sobres de regalo (Temporada 1 y códigos), arriba en Sobres */
#screenBody.shop-screen .sg-gifts{background:var(--vr-plate);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);padding:8px 14px 10px;display:grid;gap:6px;color:var(--vr-ink);filter:drop-shadow(3px 4px 0 rgba(2,8,30,.5))}
#screenBody.shop-screen .sg-gh{font-size:14px;text-transform:uppercase}
#screenBody.shop-screen .sg-gifts>small{color:var(--vr-sub);font-size:10px}
#screenBody.shop-screen .sg-gift{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#screenBody.shop-screen .sg-gift .sg-ball{width:28px;height:28px;flex:none}
#screenBody.shop-screen .sg-gift>b{flex:1 1 120px;text-transform:uppercase;font-size:13px}
#screenBody.shop-screen .sg-gift select{flex:1 1 140px;min-height:44px;max-width:100%}
#screenBody.shop-screen .sg-gift .cta{min-height:44px;padding:4px 16px}
.t1-gift{margin:0;padding-left:18px;display:grid;gap:4px}
#screenBody.shop-screen .sg-pk{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:center;text-align:center;gap:0;padding:6px 6px;min-height:64px;border:0;box-shadow:none;background:var(--pk-c);color:#fff;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
#screenBody.shop-screen .sg-pk .sg-ball{display:none}
#screenBody.shop-screen .sg-pk .sg-pn{color:#fff;text-transform:uppercase;font-size:13px;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
#screenBody.shop-screen .sg-pk .sg-pp{color:#fff;font-size:12px}
#screenBody.shop-screen .sg-pk .sg-pp .pxi{display:none}
#screenBody.shop-screen .sg-pk .sg-ps{font-size:8.5px;color:rgba(255,255,255,.9)}
#screenBody.shop-screen .pk-leyenda{--pk-c:#e0a400}
#screenBody.shop-screen .sg-pk.short{filter:saturate(.45) brightness(.92)}
/* Jugadores: cada oferta, una placa blanca */
#screenBody.shop-screen .shop-offer{background:var(--vr-plate);color:var(--vr-ink);border:0;box-shadow:none;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);filter:drop-shadow(3px 4px 0 rgba(2,8,30,.45))}
#screenBody.shop-screen .shop-offer .so-name{color:var(--vr-ink);text-transform:uppercase}
#screenBody.shop-screen .shop-offer .so-sub{color:var(--vr-sub)}
#screenBody.shop-screen .shop-offer .so-price{color:#b07800}
#screenBody.shop-screen .shop>.note{color:#cdd8ff}
#screenBody.shop-screen>.view-toolbar#tt.shop-tabs{width:auto;align-self:stretch;max-width:none}
#screenBody.shop-screen .gd-pt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#screenBody.shop-screen .gd-pt .pxi{height:.85em;width:auto}
#screenBody.shop-screen .runbar.wallet span{color:var(--vr-ink)}
#screenBody.shop-screen>.view-toolbar#tt.shop-tabs{box-shadow:none!important;border:0!important;background:none!important}

/* ---------- 0.50: evento de Halloween (body.hw-event mientras dura; renderMenu) ----------
   Todo el juego pasa a morado con brillo naranja y los botones principales, a naranja. La pestaña «Halloween» de la Tienda (renderHwShop),
   el aviso en Sobres, las calabazas de la cartera y el resultado */
body.hw-event{--vr-blue:#3b1766;--vr-blue2:#160726;--vr-yel:#ff8a2a}
body.hw-event #screen:has(>.card.vr-screen),body.hw-event #screen:has(>.card.vr-theme){background:linear-gradient(118deg,rgba(255,255,255,0) 0 50%,rgba(255,255,255,.07) 50% 60%,rgba(255,255,255,0) 60% 65%,rgba(255,255,255,.04) 65% 69%,rgba(255,255,255,0) 69%),radial-gradient(90% 40% at 85% 8%,rgba(255,122,26,.38),rgba(0,0,0,0) 70%),linear-gradient(170deg,var(--vr-blue),var(--vr-blue2) 72%)!important}
.hw-wal{display:inline-flex;align-items:center;gap:4px}
:is(.hw-wal,.hw-shop,.hw-ad,.hw-gain) .vr-pumpkin{width:16px;height:16px;vertical-align:-3px;flex:none}
.hw-shop{display:flex;flex-direction:column;gap:12px}
.hw-hero{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(90deg,#6a2bb0,#ff7a1a);color:#fff;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
.hw-hero>.vr-pumpkin{width:40px;height:40px}
.hw-ht{display:flex;flex-direction:column;gap:4px;min-width:0}
.hw-ht b{font-size:17px}
.hw-ht small{font-size:11px;line-height:1.45;color:#ffe7cf}
.hw-n{margin-left:auto;font-size:28px;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.hw-pack{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:rgba(6,28,87,.6);border-left:6px solid #2fd27a}
.hw-pt{display:flex;flex-direction:column;gap:5px}
.hw-pt b{font-size:16px;color:#fff}
.hw-pt small{font-size:11px;line-height:1.45;color:#d8e2ff}
.hw-acts{display:grid;grid-template-columns:1fr;gap:10px}
.modal.cquit .sb-ok.danger{background:#d9383a;color:#fff}   /* 0.52.9: borrar la carrera */
.hw-acts button{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.hw-acts small{font-size:10px}
.hw-acts button:disabled{opacity:.5}
.hw-h{margin:6px 0 0;font-size:16px;color:#fff}
.hw-coins{min-height:46px}
.hw-card{display:flex;flex-direction:column;gap:6px}
.hw-card:disabled{opacity:.55;cursor:default}
.hw-price{display:block;text-align:center;font-size:13px;color:#fff;background:rgba(6,28,87,.7);padding:6px 4px}
.hw-ad{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 10px;padding:10px 14px;border:0;color:#fff;text-align:left;background:linear-gradient(90deg,#6a2bb0,#ff7a1a);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%);cursor:pointer;font:inherit}
.hw-ad>.vr-pumpkin{width:30px;height:30px}
.hw-ad span{display:flex;flex-direction:column;gap:3px}
.hw-ad small{font-size:11px;color:#ffe7cf}
.hw-ad:focus-visible{outline:3px solid var(--vr-yel);outline-offset:2px}
.rp.hw-plate{--c:#ff7a1a}
.rp.hw-plate .face{background:linear-gradient(90deg,#f5f8ff 55%,#ffe2bf)}

/* 0.50: amigos en pequeño, abajo a la izquierda de la pantalla de arriba (game.js renderMenu, online.js paintPill): los conectados en
   verde y un punto rojo si hay solicitudes o retos */
#screenBody .vr-ds .ds-fr{position:absolute;left:8px;bottom:8px;z-index:1;display:flex;align-items:center;gap:6px;min-height:44px;padding:2px 12px 2px 8px;border-radius:22px;
  background:rgba(8,14,40,.72);color:#fff;border:2px solid rgba(255,255,255,.75);font-size:13px;box-shadow:2px 3px 0 rgba(0,0,0,.4)}
#screenBody .vr-ds .ds-fr .pxi{width:18px;height:18px}
#screenBody .vr-ds .ds-fr b{min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;font-size:11px;background:#5d6789;color:#fff}
#screenBody .vr-ds .ds-fr b.on{background:#2fae4a}
#screenBody .vr-ds .ds-fr .dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--vr-red);box-shadow:0 0 0 2px #0a0f24}
#screenBody .vr-ds.hw .ds-fr{background:rgba(26,6,40,.78);border-color:#ffb35c}