/* Tienda (game.js renderShop y shopBuy, tarea 10): los cinco jugadores del día y los tickets en una sola pantalla, en la línea de
   los sobres del gacha. Vertical: una oferta por fila; horizontal o ancho: las cinco en columnas. Borde de cada oferta = color de su
   rareza (--rc, style.css). Botones de 44 px como mínimo */
.shop{display:flex;flex-direction:column;gap:8px;min-height:0}
/* Una sola pantalla en cualquier tamaño (arreglo M-3): cabecera, monedero y tickets siempre a la vista; si no cabe todo, solo la
   lista de ofertas se desplaza por dentro (el mando la sigue: controller.js enfoca con scrollIntoView) */
.page-content:has(>.shop){overflow:hidden}
.page-content>.shop{flex:1 1 auto}
/* 0.50: la pestaña Halloween es más alta que la pantalla del móvil (portada del evento, sobre y las 8 cartas de la Tienda de calabazas):
   se desplaza entera; con la regla de arriba, sus cartas quedaban cortadas y no se podían comprar */
.page-content:has(>.hw-shop),.page-content:has(>.canje){overflow-y:auto}
.page-content>.hw-shop,.page-content>.canje{flex:none}   /* (el Canje, igual: en 405×720 su última fila quedaba fuera) */
.shop>*{flex:none}
.shop>.shop-offers{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:2px;
 grid-auto-rows:max-content}   /* filas a su altura: al encoger la lista, se desplaza en vez de aplastar las tarjetas */
.shop-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-top:2px}
.shop-head .eyebrow{font-size:12px;font-weight:400;letter-spacing:1px;color:var(--ui-accent)}
.shop-head small{flex:1 1 auto;font-size:12px;line-height:1.3;color:var(--ui-muted);text-align:right}
.shop-head #shMsg.on{color:#7be08f}
.shop-head #shMsg.warn{color:#ffd06b}
.shop-offers{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.shop-offers>.note{margin:0}
.shop-items{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.shop>.note{margin:0;font-size:12px;line-height:1.4;color:var(--ui-muted)}
.card .shop :is(.shop-offer,.shop-item){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3px 10px;width:100%;min-width:0;min-height:56px;
 margin:0;padding:4px 10px 4px 4px;text-align:left;font:15px var(--font-ui);color:var(--ui-text);cursor:pointer;
 background:var(--pixel-tile);border:2px solid var(--rc,var(--pixel-edge));box-shadow:var(--pixel-bevel)}
.shop .shop-offer .pix{width:48px!important;height:48px!important;background:#101b36;box-shadow:1px 1px 0 var(--pixel-ink)}
.shop .so-info,.shopbuy .so-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.shop .so-name,.shopbuy .so-name{font-size:16px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop .so-meta,.shopbuy .so-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.shop .so-meta :is(.chip,.rar),.shopbuy .so-meta :is(.chip,.rar){font-size:11px;line-height:1.35;white-space:nowrap}
.shop .so-sub,.shopbuy .so-sub{font-size:12px;color:var(--ui-muted)}
.shop .so-own{font-style:normal;color:#7be08f}
.shop .so-price{font-size:16px;color:var(--ui-accent);white-space:nowrap}
.card .shop :is(.shop-offer,.shop-item).short .so-price{color:#ff9480}
.card .shop .shop-offer:disabled{opacity:.6;cursor:default}
.card .shop .shop-offer:disabled .so-price{color:#7be08f}
.shop .shop-item .menu-icon{width:28px;height:28px;margin-left:6px;color:var(--ui-accent)}
.shop .shop-item .so-name{font-size:17px;color:var(--ui-accent)}
.card .shop :is(.shop-offer,.shop-item):focus-visible{outline:3px solid var(--ui-cyan);outline-offset:-3px}
@media(hover:hover){.card .shop :is(.shop-offer,.shop-item):not(:disabled):hover{border-color:var(--ui-cyan)}}
/* Vertical alto (iPhone): fichas más grandes para usar la altura */
@media(orientation:portrait) and (min-height:800px) and (max-width:699px){
 .shop{gap:10px}
 .card .shop .shop-offer{min-height:80px;padding:6px 12px 6px 6px}
 .shop .shop-offer .pix{width:64px!important;height:64px!important}
 .shop .so-name{font-size:18px}
 .card .shop .shop-item{min-height:62px}
}
/* Horizontal o ancho: las cinco ofertas en columnas (retrato arriba, precio abajo) y los dos tickets en fila */
@media(min-width:700px){
 .shop-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .shop-offers{grid-template-columns:repeat(5,minmax(0,1fr))}
 .card .shop .shop-offer{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:3px;padding:6px 4px}
 .shop .shop-offer .so-info{align-items:center;max-width:100%}
 .shop .shop-offer .so-meta{justify-content:center}
}
@media(min-width:700px) and (min-height:700px){
 .card .shop .shop-offer{padding:12px 6px;gap:6px}
 .shop .shop-offer .pix{width:72px!important;height:72px!important}
 .card .shop .shop-item{min-height:64px}
}
/* Poca altura: sin la nota de las monedas */
@media(max-height:700px){.shop>.note{display:none}}
/* Vertical bajo (360×640): filas de 48 px */
@media(orientation:portrait) and (max-height:700px){
 .shop{gap:6px}
 .card .shop :is(.shop-offer,.shop-item){min-height:48px;padding:2px 8px 2px 2px;gap:2px 8px}
 .shop .shop-offer .pix{width:40px!important;height:40px!important}
 .shop .so-name{font-size:15px}
 .shop .so-info{gap:2px}
}
@media(orientation:landscape) and (max-height:500px){
 .shop{gap:5px}
 .shop .shop-offer .pix{width:40px!important;height:40px!important}
 .shop .so-name{font-size:15px}
 .card .shop .shop-item{min-height:46px;padding:2px 10px 2px 4px}
 /* Chips en una línea (en 5 columnas, «Poco común» bajaba a otra y alargaba la tarjeta) y «Lv 1 · nota · …» sin partir */
 .shop .shop-offer .so-meta{flex-wrap:nowrap;gap:3px}
 .shop .shop-offer .so-meta :is(.chip,.rar){font-size:10px;padding:0 2px}
 .shop .shop-offer .so-sub{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Confirmación de compra: el marco, el fondo, el título y los botones (Cancelar y el «Comprar» amarillo, .sb-ok) son los comunes de
   los diálogos del juego (pixel-ui.css, con renombrar, fusionar y equipos); aquí, solo lo propio. Cancelar lleva .back para el ○ */
dialog.shopbuy{width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 16px);padding:14px}
dialog.shopbuy[open]{display:flex;flex-direction:column;gap:10px}
.shopbuy h2{overflow-wrap:anywhere}
.shopbuy p{margin:0;font-size:13px;line-height:1.35;color:var(--ui-muted)}
.shopbuy .sb-note{color:#ffd06b}
.shopbuy .sb-card{display:flex;align-items:center;gap:12px;padding:8px;background:#101b36;border:2px solid var(--rc,var(--pixel-edge));box-shadow:inset 2px 2px 0 var(--pixel-ink)}
.shopbuy .sb-face{display:flex;flex:none}
.shopbuy .sb-face .pix{width:64px!important;height:64px!important}
.shopbuy .sb-card .menu-icon{width:40px;height:40px;color:var(--ui-accent)}
.shopbuy .sb-acts{display:flex;gap:8px}
@media(orientation:landscape) and (max-height:500px){
 dialog.shopbuy{width:min(460px,calc(100vw - 32px));padding:10px}
 dialog.shopbuy[open]{gap:7px}
 .shopbuy h2{font-size:18px}
 .shopbuy .sb-face .pix{width:48px!important;height:48px!important}
 .shopbuy button{min-height:44px}
}

/* 0.41: pestañas de la Tienda (Ofertas | Sobres): la elegida, como en Mi equipo */
.card #tt.shop-tabs [role=tab][aria-selected=true]{background:var(--ui-accent);color:#142437;border-color:var(--ui-accent);box-shadow:none}
/* Título y pestañas en una fila (como el Mercado en horizontal), así las ofertas no pierden altura */
.card.paged.shop-screen:has(>#tt){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;column-gap:8px}
.shop-screen>.page-heading{grid-column:1;min-width:0}
.shop-screen>.view-toolbar{grid-column:2;min-width:0;align-self:center}
.shop-screen>:is(.page-viewport,.view-actions){grid-column:1/-1}
.card.shop-screen #tt.shop-tabs button{padding:6px 4px;white-space:nowrap}

/* Sobres por saga: una fila por saga (escudo, nombre y sus tres sobres); solo se desplaza la lista */
.pk-basico{--pk-c:#3f8fff}.pk-elite{--pk-c:#a24cff}.pk-leyenda{--pk-c:#ffcc22}
.shop>.sg-list{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:2px}
.shop>.sg-pay{margin:0;font-size:12px;line-height:1.35;color:#ffd06b}
.sg-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
.sg-row{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 8px 8px;background:var(--pixel-tile);border:2px solid var(--pixel-edge);box-shadow:var(--pixel-bevel)}
.sg-id{display:flex;align-items:center;gap:10px;min-width:0}
.sg-id img.crest{width:36px;height:36px;flex:none}
.sg-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.sg-txt b{font-size:17px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-txt small{font-size:12px;color:var(--ui-muted)}
.sg-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.card .sg-pk{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 6px;min-width:0;min-height:48px;margin:0;padding:3px 6px;
 text-align:left;cursor:pointer;color:#fff;background:#101b36;border:2px solid var(--pk-c);border-radius:0;box-shadow:inset 0 -3px 0 var(--pk-c)}
.sg-pk .sg-ball{grid-row:1/3;width:24px;height:24px}
.sg-pk .sg-pn{font-size:14px;line-height:1.2;color:var(--pk-c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-pk .sg-pp{font-size:13px;line-height:1.2;color:var(--ui-accent);white-space:nowrap}
.sg-pk .sg-pp .pxi{height:1em}
.card .sg-pk.short .sg-pp{color:#ff9480}
.card .sg-pk:focus-visible{outline:3px solid var(--ui-cyan);outline-offset:-3px}
@media(hover:hover){.card .sg-pk:hover{background:#18264a}}
@media(min-width:700px){.sg-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
@media(orientation:portrait) and (min-height:800px) and (max-width:699px){
 .sg-list{gap:10px}
 .card .sg-pk{min-height:52px}
 .sg-pk .sg-ball{width:28px;height:28px}
}

/* Pantalla de un sobre: cabecera, tabla de rarezas y lista de jugadores con su probabilidad (solo se desplaza la lista) */
.page-content>.spk{flex:1 1 auto}
.spk{min-height:0;display:flex;flex-direction:column;gap:6px}
.spk-info,.spk-players{display:flex;flex-direction:column;gap:6px;min-width:0}
.spk-info{flex:none}
.spk-players{flex:1 1 auto;min-height:0}
:is(.spk-info,.spk-players)>*{flex:none;min-width:0;margin:0}
.spk-hero{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#101b36;border:2px solid var(--pk-c);box-shadow:inset 0 -3px 0 var(--pk-c)}
.spk-ball{width:36px;height:36px;flex:none}
.spk-hero img.crest{width:36px;height:36px;flex:none}
.spk-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.spk-txt .eyebrow{font-size:12px;letter-spacing:1px;color:var(--pk-c)}
.spk-txt b{font-size:16px;color:#fff}
.spk-txt small{font-size:12px;color:var(--ui-muted)}
.spk-odds{width:100%;border-collapse:collapse;font-size:13px;color:var(--ui-text);background:#101b36;border:2px solid var(--pixel-edge)}
.spk-odds :is(th,td){padding:2px 8px;text-align:right;border-bottom:1px solid #2c4470;font-weight:400;white-space:nowrap}
.spk-odds thead th{font-size:11px;color:var(--ui-muted)}
.spk-odds :is(thead th:first-child,tbody th){text-align:left}
.spk-odds tbody tr:last-child>*{border-bottom:0}
.spk-odds .rar{font-size:11px;line-height:1.35}
.spk-odds td:nth-child(2){color:var(--ui-accent)}
.spk-odds caption{caption-side:top;padding:3px 8px;font-size:12px;line-height:1.3;text-align:left;color:var(--ui-muted);background:#101b36}
.spk-note{font-size:12px;line-height:1.35;color:var(--ui-muted)}
.spk-bar{grid-template-columns:minmax(0,1fr) minmax(0,10em)}
.spk-bar input{grid-column:auto}
.spk .coll-sum button{min-height:40px}
.spk-players>.spk-list{flex:1 1 0;min-height:150px}
.spk-list{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;display:flex;flex-direction:column;gap:3px;padding:2px}
.spk-list>.ghost{flex:none;min-height:44px}
.spk-list>.note{margin:0}
.spk-row{flex:none;display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:6px;min-height:38px;padding:1px 8px 1px 2px;background:var(--pixel-tile);border:1px solid #2c4470}
.spk-face{width:32px;height:32px;background:#101b36}
.spk-face canvas{width:32px!important;height:32px!important;display:block}
.spk-nm{font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spk-meta{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ui-muted);white-space:nowrap}
.spk-meta i{font-style:normal}
.spk-meta .rar{font-size:10px;line-height:1.35}
.spk-meta .ok{color:#7be08f;font-weight:400}
.spk-pct{min-width:4.6em;font-size:14px;font-weight:400;color:var(--ui-accent);text-align:right}
.spk-row:focus-visible{outline:3px solid var(--ui-cyan);outline-offset:-3px}
.card .cta.short small{color:#8a1c0c}
#spBuy>span{white-space:nowrap}
/* Vertical bajo: tabla y cabecera más justas */
@media(orientation:portrait) and (max-height:700px){
 .spk-odds :is(th,td){padding:1px 6px}
 .spk-hero{padding:3px 6px}
 .spk-note{display:none}
 .spk-players>.spk-list{min-height:120px}
}
/* Horizontal: cabecera, tabla y nota a la izquierda (se desplazan si no caben); buscador y lista a la derecha */
@media(orientation:landscape) and (min-width:700px){
 .page-content:has(>.spk){overflow:hidden}
 .spk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr);gap:12px}
 .spk-info{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px}
 .spk-players>.spk-list{min-height:0}
}
@media(orientation:landscape) and (max-height:500px){
 .spk-odds{font-size:12px}
 .spk-odds :is(th,td){padding:0 6px}
 .spk-hero{padding:2px 6px}
 .spk-ball,.spk-hero img.crest{width:28px;height:28px}
}
/* Diálogo «¿Abrir un sobre…?»: el balón y el escudo del sobre */
.shopbuy .sg-card{border-color:var(--pk-c)}
.shopbuy .sg-card .sg-ball{width:40px;height:40px;flex:none}
.shopbuy .sg-card img.crest{width:40px;height:40px;flex:none}
/* Vertical estrecho (360 px): el balón del sobre más pequeño para que quepa «Leyenda» */
@media(max-width:380px){
 .card .sg-pk{gap:0 4px;padding:3px 4px}
 .sg-pk .sg-ball{width:18px;height:18px}
 .sg-pk .sg-pn{font-size:13px}
 .sg-pk .sg-pp{font-size:12px}
}

/* 0.50 (Tienda nueva): Gacha con el legendario asegurado y la compra de tickets; pestaña Canje (repetidos → fragmentos → jugadores de la
   semana) */
.gd-pity{margin:6px 0 0;font-size:13px;color:var(--vr-yel,#ffd23c)}
.gd-pity .pxi{width:14px;height:14px;vertical-align:-2px}
.gd-trade{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 8px;border-radius:8px;background:rgba(8,14,40,.55);font-size:13px}
.gd-trade>span{flex:1;min-width:0}
.gd-trade .pxi{width:14px;height:14px;vertical-align:-2px}
.gd-trade button{min-height:44px;min-width:56px;padding:0 10px}
.canje .cj-have{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:rgba(8,14,40,.55)}
.canje .cj-have>span{flex:1 1 160px;min-width:0;font-size:13px}
.canje .cj-frags{font-size:18px;color:#8fe3ff}
.canje .cj-frags .pxi,.cj-buy .pxi,.cj-rar .pxi{width:16px;height:16px;vertical-align:-3px}
.canje .cj-have .cta{min-height:44px}
.cj-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cj-it{display:flex;flex-direction:column;gap:6px;min-width:0}
.cj-it.done .pc{opacity:.55}
.cj-buy{min-height:44px;padding:4px 6px;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.cj-buy small{font-size:10px;opacity:.85}
.cj-rars{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.cj-rar{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.06);cursor:pointer}
.cj-rar input{width:20px;height:20px}
@media (orientation:landscape){.cj-list{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cjbuy .sb-ok:disabled{opacity:.45;cursor:not-allowed}