/* 0.50: el pase de la Temporada 1, «La invasión del Ogro» (pase.js), con el diseño que eligió el usuario el 27/10: «el camino hasta la
   carta». Cabecera de metal negro con el casco del Ogro, la barra de XP en rojo, la carta del nivel 30 arriba (las dos versiones de Canon
   Evans hasta que se elige una) y el camino de niveles bajando en zigzag. La pastilla de la portada (#mPass), abajo a la derecha de la
   pantalla de arriba, como la de Amigos */
.ps{display:flex;flex-direction:column;gap:10px;padding-bottom:16px}
.ps-ogre{display:block;image-rendering:pixelated}
.ps-head{position:relative;padding:14px 72px 12px 14px;background:linear-gradient(135deg,#1c1f29,#0b0c11 60%);border:3px solid #0a0f22;border-bottom:4px solid #ff3b3b;overflow:hidden;color:#fff}
.ps-head::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,59,59,.12) 0 10px,transparent 10px 20px)}
.ps-head .ps-ogre{position:absolute;right:12px;top:12px;width:52px;height:52px}
.ps-head small{position:relative;display:block;color:#ff7a7a;font-size:12px;letter-spacing:2px}
.ps-head h2{position:relative;margin:6px 0 4px;font-size:clamp(20px,6vw,28px);line-height:1.05;font-weight:400;text-transform:uppercase;text-shadow:3px 3px 0 #a10d18;text-wrap:balance}
.ps-head p{position:relative;margin:0;color:#c9cede;font-size:12px}
.ps-xp{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#0f1118;border:3px solid #0a0f22;color:#fff}
.ps-lv{flex:none;width:54px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:#a10d18;border:3px solid #000;box-shadow:inset 0 0 0 2px #ff5a5a;font-size:22px;text-shadow:2px 2px 0 #000}
.ps-lv small{font-size:9px;margin-bottom:2px;color:#ffd0d0;text-shadow:none}
.ps-bar{flex:1;min-width:0}
.ps-bar .t{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#c9cede;margin-bottom:5px}
.ps-bar .b{height:14px;background:#000;border:2px solid #2b2f3a;position:relative}
.ps-bar .b i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,#ff3b3b 0 6px,#d61f2b 6px 12px)}
.ps-how{display:flex;gap:6px;flex-wrap:wrap}
.ps-how span{font-size:12px;padding:4px 8px;background:#151821;border:2px solid #2b2f3a;color:#e6e9f4}
.ps-how b{color:#ff7a7a;font-weight:400}
.ps-note{margin:0}
/* El premio del nivel 30 */
.ps-top{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#0b0c11;border:3px solid #0a0f22;box-shadow:inset 0 0 0 2px #a10d18;color:#fff;text-align:center}
.ps-top>small{color:#ff7a7a;font-size:12px;letter-spacing:1px}
.ps-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,380px)}
.ps-cards.one{grid-template-columns:minmax(0,1fr);width:min(60%,220px)}
.ps-cw{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ps-cw b{font-weight:400;font-size:13px;color:#ffe9a8}
.ps-pickt{margin:0;font-size:12px;color:#c9cede;max-width:36ch}
.ps-ok{margin:0;color:#7dffb4;font-size:13px;display:inline-flex;align-items:center;gap:4px}
.ps-ok .pxi{width:14px;height:14px}
/* El camino: del nivel 29 al 1, en zigzag sobre una línea central */
.ps-road{position:relative;list-style:none;margin:0;padding:4px 0 8px}
.ps-road::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;background:repeating-linear-gradient(#2b2f3a 0 10px,#14161c 10px 20px)}
.ps-n{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:50%;margin:8px 0}
.ps-n.l{flex-direction:row-reverse;text-align:right;padding-right:20px}
.ps-n.r{margin-left:50%;padding-left:20px}
.ps-dot{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;background:#11131a;border:3px solid #000;box-shadow:0 0 0 2px #2b2f3a;box-sizing:border-box}
.ps-n.l .ps-dot{right:-9px}.ps-n.r .ps-dot{left:-9px}
.ps-n.got .ps-dot{background:#ff3b3b}
.ps-n.ready .ps-dot{background:#ffe14a;box-shadow:0 0 0 2px #ffe14a,0 0 10px #ffe14a}
.ps-n.now .ps-dot{background:#fff}
.ps-ic{flex:none;width:28px;height:28px;display:grid;place-items:center}
.ps-ic .pxi{width:26px;height:26px}
.ps-box{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:7px 9px;background:#11131a;border:3px solid #000;box-shadow:inset 0 0 0 2px #2b2f3a;color:#c9cede;font-size:12px}
.ps-n.l .ps-box{align-items:flex-end}
.ps-box b{color:#fff;font-weight:400;font-size:13px;line-height:1.15}
.ps-n.big .ps-box{box-shadow:inset 0 0 0 2px #ffd23a;background:linear-gradient(#22252f,#11131a)}
.ps-n.ready .ps-box{box-shadow:inset 0 0 0 2px #ffe14a}
.ps-n.got .ps-box{opacity:.75}
.ps-box .ps-go{margin-top:4px;min-height:44px;padding:4px 12px;font-size:14px}
/* Elegir la versión */
dialog.modal.ps-pick{width:min(640px,calc(100vw - 16px));max-height:calc(var(--ui-height,100dvh) - 16px);overflow-y:auto;background:#0b0c11;color:#fff;border:3px solid #ff3b3b;text-align:center}
dialog.modal.ps-pick h2{margin:4px 0;font-weight:400}
.ps-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.ps-opt{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:8px;background:#11131a;border:3px solid #000}
.ps-opt.ps-ogro{box-shadow:inset 0 0 0 2px #a10d18}.ps-opt.ps-futuro{box-shadow:inset 0 0 0 2px #21c4e8}
.ps-opt b{font-weight:400;font-size:15px}
.ps-opt small{font-size:11px;color:#c9cede;line-height:1.3}
.ps-opt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.ps-opt li{display:flex;justify-content:space-between;gap:6px;font-size:12px;padding:3px 6px;background:#0b0c11;border:1px solid #2b2f3a}
.ps-opt li i{font-style:normal;color:#ffe14a}
.ps-opt .cta{min-height:44px}
/* La pastilla de la portada */
#screenBody .vr-ds .ds-pass{position:absolute;right:8px;bottom:8px;z-index:1;display:flex;align-items:center;gap:6px;min-height:44px;padding:2px 10px 2px 6px;border-radius:22px;
  background:rgba(20,6,8,.82);color:#fff;border:2px solid #ff3b3b;font-size:13px;box-shadow:2px 3px 0 rgba(0,0,0,.4);cursor:pointer}
#screenBody .vr-ds .ds-pass .ps-ogre{width:22px;height:22px}
#screenBody .vr-ds .ds-pass b{font-weight:400;color:#ffe14a}
#screenBody .vr-ds .ds-pass .dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#ffe14a;box-shadow:0 0 0 2px #0a0f24}
@media (max-width:360px){.ps-n{width:100%;margin-left:0!important;padding:0 0 0 20px!important;flex-direction:row!important;text-align:left!important}.ps-n .ps-dot{left:-9px!important;right:auto!important}.ps-road::before{left:0}.ps-n.l .ps-box{align-items:flex-start}}