/* Selector de jugador con el polígono de 7 lados (picker.js). Vertical primero: campo oscurecido arriba,
   comparación, lista y acciones fijas. En horizontal bajo: campo a la izquierda, comparación
   al centro, lista y acciones a la derecha. Solo la lista se desplaza. */
dialog.picker{
 --pk-bg:#0f1633;--pk-card:#1d2852;--pk-hi:#26346e;--pk-edge:#3f548f;--pk-text:#e9edff;--pk-muted:#b9c2e8;
 --pk-gold:#ffd06b;--pk-cyan:#6fe3ff;--pk-up:#7be08f;--pk-down:#ff9480;--pk-deep:#0a0f24;
 box-sizing:border-box;margin:auto;border:0;border-radius:0;
 width:min(560px,100vw);max-width:100vw;height:min(var(--ui-height,100dvh),100dvh);max-height:100dvh;
 display:flex;flex-direction:column;overflow:hidden;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
 background:#141c3a;color:var(--pk-text);font:15px var(--font-ui);
 box-shadow:0 0 0 2px var(--pixel-ink,#080e21),6px 6px 0 var(--pixel-ink,#080e21);
 -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
dialog.picker:not([open]){display:none}
dialog.picker::backdrop{background:#060918d9}
dialog.picker *{box-sizing:border-box}
.picker :is(h2,p){margin:0;font-weight:400}
.picker button,.picker select{font-family:var(--font-ui);font-weight:400;border-radius:0;color:var(--pk-text);cursor:pointer;transition:none}
.picker :is(button,select):focus-visible{outline:3px solid var(--pk-cyan);outline-offset:-3px}
.picker :is(button,select):disabled{cursor:default}
.picker .up{color:var(--pk-up)}.picker .down{color:var(--pk-down)}.picker .same{color:var(--pk-muted)}

/* Franja del campo, oscurecida; el editor puede poner su vista del campo (fieldPreview) */
.pk-field{position:relative;flex:none;height:96px;overflow:hidden;display:flex;align-items:center;justify-content:center;
 background:repeating-linear-gradient(0deg,#3f9a3f 0 24px,#47a747 24px 48px);border-bottom:2px solid #dfeee0}
.pk-field::before{content:"";position:absolute;left:34%;right:34%;top:-60%;height:120%;border:2px solid #dfeee0;border-radius:50%}
.pk-field>:not(.pk-dim){position:relative;max-width:100%;max-height:100%}
.pk-dim{position:absolute;inset:0;background:rgba(6,9,24,.55);pointer-events:none}

/* Cuerpo: rejilla con zonas para cambiar de orientación sin tocar el DOM */
.pk-main{flex:1;min-height:0;display:grid;background:var(--pk-bg);border-top:3px solid var(--pk-gold);
 grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
 grid-template-areas:"head x" "cmp cmp" "avg avg" "tools tools" "list list" "acts acts"}
.pk-head{grid-area:head;min-width:0;padding:8px 0 6px 12px;line-height:1.25;align-self:center}
.pk-head h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pk-text);text-shadow:2px 2px 0 var(--pixel-ink,#080e21)}
.pk-sub{font-size:12px;color:var(--pk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-x{grid-area:x;align-self:center;margin:6px 12px 6px 8px;width:44px;height:44px;padding:0;font-size:18px;
 background:var(--pk-card);border:2px solid var(--pk-edge);box-shadow:var(--pixel-bevel)}

/* ACTUAL · polígono · NUEVO */
.pk-compare{grid-area:cmp;display:grid;grid-template-columns:88px minmax(0,1fr) 88px;gap:4px;align-items:center;padding:0 10px;min-height:0}
.pk-radar{min-width:0;display:flex;justify-content:center}
.pk-radar svg{display:block;width:100%;height:auto;max-height:min(236px,27dvh);overflow:visible}
.pk-radar .rad-lab{font-family:var(--font-ui)}
.pk-card{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:6px 3px;text-align:center;
 background:var(--pk-card);border:2px solid var(--pk-edge);box-shadow:var(--pixel-bevel)}
.pk-new{background:var(--pk-hi);border-color:var(--pk-gold)}
.pk-lab{font-size:11px;color:var(--pk-muted)}
.pk-new .pk-lab{color:var(--pk-gold)}
.pk-card .pk-face{width:56px;height:56px}
.pk-name{max-width:100%;font-size:13px;line-height:1.15;overflow-wrap:anywhere;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.pk-nota{font-size:24px;line-height:1;color:#c9d0f0}
.pk-new .pk-nota{color:var(--pk-gold)}
.pk-delta{font-size:13px}
/* «POS · Elemento» bajo el nombre: dos etiquetas de color (el «·» solo lo leen los lectores de pantalla); si no caben, una debajo de otra */
.pk-role{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 3px;max-width:100%;font-size:10px;line-height:1.3}
.pk-role .chip{font-size:10px;white-space:nowrap}
.pk-dot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pk-avg{grid-area:avg;padding:6px 12px 0;text-align:center;font-size:12px;color:var(--pk-muted)}

/* Retratos con el marco de su rareza (mismos colores que el resto del juego) */
.pk-face{display:grid;place-items:center;flex:none;overflow:hidden;background:#2b3770;border:2px solid var(--pk-edge);color:var(--pk-muted);font-size:20px}
.pk-face canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated}
/* Rareza de la copia (0–6), con los colores del chip (--rar-N de style.css); la única, prisma */
.pk-face.r0{border-color:var(--rar-0)}.pk-face.r1{border-color:var(--rar-1)}.pk-face.r2{border-color:var(--rar-2)}.pk-face.r3{border-color:var(--rar-3)}
.pk-face.r4{border-color:var(--rar-4)}.pk-face.r5{border-color:var(--rar-5)}.pk-face.r6{border-image:var(--rar-6) 1}
.pk-face.empty{border-style:dashed}

/* Puesto / Todos y orden */
.pk-tools{grid-area:tools;display:flex;align-items:center;gap:6px;padding:8px 12px;min-width:0}
.pk-tabs{display:flex;gap:6px}
.pk-tabs button{min-width:44px;min-height:44px;padding:0 14px;font-size:14px;background:var(--pk-card);border:2px solid var(--pk-edge);box-shadow:var(--pixel-bevel)}
.pk-tabs button[aria-selected=true]{background:var(--pk-cyan);border-color:var(--pk-cyan);color:#10143a;box-shadow:inset -2px -2px 0 #2a9fb8}
.pk-sort{position:relative;margin-left:auto;display:flex}
.pk-sort::after{content:"";position:absolute;right:10px;top:50%;width:8px;height:5px;transform:translateY(-50%);pointer-events:none;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}
.pk-sort select{-webkit-appearance:none;appearance:none;min-width:44px;min-height:44px;padding:0 28px 0 12px;font-size:16px;
 background:var(--pk-card);border:2px solid var(--pk-edge);box-shadow:var(--pixel-bevel)}
.pk-sort option{color:#111;background:#fff}

/* Lista: lo único que se desplaza */
.pk-list{grid-area:list;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--pk-edge) transparent;
 display:flex;flex-direction:column;gap:4px;padding:3px 12px 8px}
/* Enfocar una fila la marca (picker.js): su borde dorado ya indica el foco */
.picker .pk-row:focus-visible{outline:none}
.pk-row{flex:none;display:grid;grid-template-columns:40px minmax(0,1fr) auto 52px;gap:8px;align-items:center;width:100%;min-height:52px;padding:4px 8px;
 text-align:left;font-size:15px;background:var(--pk-card);border:2px solid var(--pk-card);box-shadow:var(--pixel-bevel)}
.pk-row.cur{border-style:dashed;border-color:var(--pk-edge)}
.pk-row.sel{background:var(--pk-hi);border:2px solid var(--pk-gold);box-shadow:inset 0 0 0 1px #ffd06b55}
.pk-row.off{opacity:.55}
.pk-row.off .pk-face{filter:grayscale(1)}
.pk-row .pk-face{width:40px;height:40px}
.pk-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.pk-rname{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11px;min-width:0}
.pk-meta .chip{font-size:11px;line-height:1.35}
/* Rareza de la copia (colores y texto del chip .rar.rN de style.css; aquí, solo el tamaño de la fila) y su nivel */
.pk-rar{font-size:inherit;border:0;padding:0 4px;line-height:1.35;white-space:nowrap;box-shadow:inset -1px -1px 0 #0003}
.pk-lv{color:var(--pk-gold);white-space:nowrap}
.pk-tag{padding:0 4px;border:1px solid var(--pk-cyan);color:var(--pk-cyan);white-space:nowrap}
.pk-why{padding:0 4px;border:1px solid var(--pk-down);color:var(--pk-down);white-space:nowrap}
.pk-off{padding:0 4px;border:1px dashed var(--pk-down);color:var(--pk-down);white-space:nowrap}
.pk-rnota{font-size:20px;text-align:right;min-width:28px}
.pk-rdelta{text-align:right;font-size:14px}
.pk-empty{padding:14px 4px 8px;text-align:center;color:var(--pk-muted)}
.pk-try{align-self:center;min-height:44px;padding:0 16px;background:var(--pk-card);border:2px solid var(--pk-cyan);color:var(--pk-cyan);box-shadow:var(--pixel-bevel)}

/* Energía (cambios en el partido) */
.pk-en{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px}
.pk-bar{display:inline-block;width:34px;height:6px;background:var(--pk-deep);border:1px solid var(--pk-edge)}
.pk-bar i{display:block;height:100%;background:var(--pk-up)}
.pk-en.mid .pk-bar i{background:var(--pk-gold)}.pk-en.lo .pk-bar i{background:var(--pk-down)}
.pk-card .pk-en{flex-direction:column;gap:2px}
.pk-card .pk-bar{width:56px}

/* Acciones fijas */
.pk-actions{grid-area:acts;display:flex;gap:8px;padding:10px 12px max(14px,env(safe-area-inset-bottom));border-top:2px solid var(--pk-edge);background:var(--pk-deep)}
.pk-actions button{min-height:52px;min-width:44px;padding:0 16px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-cancel,.pk-extra{flex:none;background:var(--pk-card);border:2px solid var(--pk-edge);box-shadow:var(--pixel-bevel)}
.pk-extra{color:var(--pk-gold);max-width:45%}
.picker .pk-ok{flex:1;min-width:0;font-size:17px;background:var(--pk-gold);color:#1b1b2b;border:2px solid #fff3c4;box-shadow:inset -3px -3px 0 #bd8535}
.picker .pk-ok:disabled{background:var(--pk-edge);border-color:var(--pk-edge);color:var(--pk-text);box-shadow:none}
.pk-actions.has-extra{flex-wrap:wrap}
.pk-actions.has-extra .pk-ok{order:-1;flex-basis:100%}
.pk-actions.has-extra .pk-extra{flex:1;max-width:none}
@media(hover:hover){.picker :is(.pk-row:not(.sel),.pk-tabs button,.pk-x,.pk-cancel,.pk-extra,.pk-try,.pk-sort select):not(:disabled):hover{border-color:var(--pk-cyan)}}

/* Móvil vertical bajo: franja y retratos más pequeños (el polígono ya se limita con dvh) */
@media(orientation:portrait) and (max-height:740px){
 .pk-field{height:64px}
 .pk-card .pk-face{width:48px;height:48px}
}

/* Horizontal bajo (móvil girado): campo | comparación | lista y acciones */
@media(orientation:landscape) and (max-height:520px){
 dialog.picker{width:100vw;flex-direction:row;padding:0 env(safe-area-inset-right) 0 0}
 .pk-field{width:calc(92px + env(safe-area-inset-left));height:auto;border-bottom:0;border-right:2px solid #dfeee0;
  background:repeating-linear-gradient(90deg,#3f9a3f 0 23px,#47a747 23px 46px)}
 .pk-field::before{left:auto;right:-60%;top:34%;bottom:34%;width:120%;height:auto}
 .pk-main{border-top:0;border-left:3px solid var(--pk-gold);column-gap:10px;row-gap:6px;padding:0 12px max(10px,env(safe-area-inset-bottom));
  grid-template-columns:minmax(0,min(392px,46%)) minmax(0,1fr) auto auto;grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"head head avg x" "cmp tools tools tools" "cmp list list list" "cmp acts acts acts"}
 .pk-head{display:flex;align-items:baseline;gap:10px;padding:6px 0}
 .pk-head h2{flex:none;max-width:60%}
 .pk-sub{min-width:0}
 .pk-x{margin:6px 0}
 .pk-avg{align-self:center;padding:0;text-align:right;white-space:nowrap}
 .pk-compare{grid-template-columns:84px minmax(0,1fr) 84px;padding:0;align-self:center}
 .pk-radar svg{max-height:min(236px,calc(100dvh - 90px))}
 .pk-card{gap:3px}
 .pk-card .pk-face{width:52px;height:52px}
 .pk-nota{font-size:22px}
 .pk-tools{padding:0}
 .pk-list{padding:3px 4px}
 .pk-row{grid-template-columns:36px minmax(0,1fr) auto 52px;min-height:46px;padding:3px 8px}
 .pk-row .pk-face{width:36px;height:36px}
 .pk-info{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 6px}
 .pk-rnota{font-size:19px}
 .pk-actions{padding:0;border-top:0;background:none}
 .pk-actions button{min-height:46px}
 .picker .pk-ok{font-size:16px}
 .pk-actions.has-extra{flex-wrap:nowrap}
 .pk-actions.has-extra .pk-ok{order:0;flex-basis:auto}
 .pk-actions.has-extra .pk-extra{flex:none;max-width:34%}
}