.xpk-vars{
  --xpk-bg2:#0b1623;--xpk-surface:#0f1e2e;--xpk-card:#111f30;--xpk-card2:#162436;
  --xpk-border:#1e3148;--xpk-border2:#253d57;
  --xpk-gold:#c8922a;--xpk-gold-lt:#e8b84b;--xpk-gold-dim:#6b4a10;--xpk-gold-glow:#c8922a1a;
  --xpk-text:#ddd3be;--xpk-text-mid:#8fa4bc;--xpk-text-dim:#3d566e;
}
.xpk-tile.xpk-static{cursor:inherit;}
.xpk-tile.xpk-static:hover .xpk-art{transform:none;}
.xpk-backdrop{
  --xpk-bg2:#0b1623;--xpk-surface:#0f1e2e;--xpk-card:#111f30;--xpk-card2:#162436;
  --xpk-border:#1e3148;--xpk-border2:#253d57;
  --xpk-gold:#c8922a;--xpk-gold-lt:#e8b84b;--xpk-gold-dim:#6b4a10;--xpk-gold-glow:#c8922a1a;
  --xpk-text:#ddd3be;--xpk-text-mid:#8fa4bc;--xpk-text-dim:#3d566e;
  position:fixed;inset:0;background:rgba(4,8,14,.82);z-index:9000;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;overscroll-behavior:contain;
  font-family:'SKR Global','Lato',system-ui,sans-serif;text-align:left;
}
.xpk-backdrop.show{display:flex;}
.xpk-backdrop button{font-family:inherit;}
html.xpk-lock,html.xpk-lock body{overflow:hidden;}

.xpk-backdrop.inline{position:static;inset:auto;background:none;padding:0;overflow:visible;z-index:auto;}
.xpk-backdrop.inline .xpk-x{display:none;}
.xpk-backdrop.inline .xpk-modal{max-width:none;padding:0;background:transparent;border:none;}
.xpk-backdrop.inline .xpk-head{margin-bottom:10px;}

.xpk-modal{background:#111826;border:1px solid var(--xpk-border2);border-radius:14px 0 14px 0;width:100%;max-width:1200px;padding:24px;box-sizing:border-box;color:var(--xpk-text);}
.xpk-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.xpk-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;color:var(--xpk-gold-lt);flex:1 1 auto;min-width:0;}
.xpk-actions{display:flex;gap:8px;flex-wrap:wrap;}
.xpk-actions:empty{display:none;}
.xpk-rf{display:flex;gap:8px;}
.xpk-rf .rf-roster-chip.xpk-hide{display:none !important;}

.xpk-x{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;background:var(--xpk-surface);border:1px solid var(--xpk-border2);border-radius:8px 0 8px 0;color:var(--xpk-text-mid);cursor:pointer;transition:all .15s;}
.xpk-x:hover{border-color:var(--xpk-gold-dim);color:var(--xpk-gold-lt);}
.xpk-btn{padding:8px 14px;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--xpk-surface);border:1px solid var(--xpk-border2);border-radius:8px 0 8px 0;color:var(--xpk-text-mid);cursor:pointer;white-space:nowrap;transition:all .15s;}
.xpk-btn:hover{border-color:var(--xpk-gold-dim);color:var(--xpk-gold-lt);}

.xpk-tabs{display:grid;grid-template-columns:repeat(2,1fr);height:38px;box-sizing:border-box;background:var(--xpk-surface);border:1px solid var(--xpk-border);border-radius:8px 0 8px 0;overflow:hidden;margin-bottom:14px;}
.xpk-tabs.tabs-4{grid-template-columns:repeat(4,1fr);}
.xpk-tab{height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--xpk-text-dim);cursor:pointer;border:none;background:transparent;transition:all .15s;}
.xpk-tab:hover{color:var(--xpk-text-mid);}
.xpk-tab.on{background:var(--xpk-gold-glow);color:var(--xpk-gold);}

.xpk-filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.xpk-search{flex:2 1 240px;min-width:0;padding:10px 12px;background:var(--xpk-surface);border:1px solid var(--xpk-border2);border-radius:6px;color:var(--xpk-text);font-size:14px;font-family:inherit;box-sizing:border-box;}
.xpk-search:focus{outline:none;border-color:#c8922a55;}
.xpk-dd{position:relative;flex:1 1 140px;min-width:0;display:flex;}
.xpk-dd-trigger{flex:1;min-width:0;display:flex;align-items:center;box-sizing:border-box;background:var(--xpk-bg2);border:1px solid var(--xpk-border2);border-radius:6px;color:var(--xpk-text);font-size:14px;padding:10px 30px 10px 12px;cursor:pointer;position:relative;text-align:left;transition:border-color .15s;}
.xpk-dd-trigger:hover,.xpk-dd.open .xpk-dd-trigger{border-color:#c8922a55;}
.xpk-dd-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xpk-dd-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:8px;color:var(--xpk-text-dim);transition:transform .15s;}
.xpk-dd.open .xpk-dd-arrow{transform:translateY(-50%) rotate(180deg);}
.xpk-dd-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:260px;background:var(--xpk-card);border:1px solid var(--xpk-border);border-radius:8px 0 8px 0;box-shadow:0 16px 32px #00000077;z-index:20;max-height:240px;overflow-y:auto;}
.xpk-dd.open .xpk-dd-menu{display:block;}
.xpk-dd-opt{padding:8px 12px;font-size:12px;font-weight:600;color:var(--xpk-text-mid);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;}
.xpk-dd-opt:hover{background:#c8922a16;color:var(--xpk-gold-lt);}
.xpk-dd-opt.on{color:var(--xpk-gold-lt);background:#c8922a10;}

.xpk-match{display:flex;margin-bottom:12px;}
.xpk-mm{display:flex;background:var(--xpk-surface);border:1px solid var(--xpk-border2);border-radius:6px;overflow:hidden;}
.xpk-mm-btn{padding:7px 16px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--xpk-text-dim);cursor:pointer;border:none;background:transparent;transition:all .15s;}
.xpk-mm-btn.on{background:var(--xpk-gold-glow);color:var(--xpk-gold);}
.xpk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;padding:12px 14px;background:var(--xpk-card2);border:1px solid var(--xpk-border2);border-radius:8px;max-height:160px;overflow-y:auto;}
.xpk-chips.grouped{max-height:260px;}
.xpk-chip{padding:6px 12px;font-size:11.5px;font-weight:600;background:var(--xpk-surface);border:1px solid var(--xpk-border2);border-radius:20px;color:var(--xpk-text-mid);cursor:pointer;transition:all .15s ease;}
.xpk-chip:hover{border-color:var(--xpk-gold-dim);color:var(--xpk-gold-lt);}
.xpk-chip.on{background:#4a7dd422;border-color:#4a7dd488;color:#7ba7ea;}
@keyframes xpkMathPulse{0%,100%{box-shadow:0 0 4px 0 #d146cc77;border-color:#d146cc77;}50%{box-shadow:0 0 12px 3px #d146ccdd;border-color:#d146cc;}}
.xpk-chip.math{animation:xpkMathPulse 1.8s ease-in-out infinite;}
.xpk-chip.math:hover{animation-play-state:paused;}
.xpk-chip.math.on{background:#d146cc22;color:#e896e0;}
.xpk-chip-label{flex-basis:100%;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;}
.xpk-chip-label:first-child{margin-top:0;}

.xpk-grid{display:grid;grid-template-columns:repeat(auto-fill,110px);gap:16px 12px;max-height:62vh;overflow-y:auto;padding:14px 4px 6px 2px;justify-content:start;}
.xpk-backdrop.inline .xpk-grid{max-height:none;}
.xpk-recent-label{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--xpk-gold-lt);margin:4px 0 -6px;}

.xpk-sug-wrap{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
.xpk-sug-cat{flex:0 1 auto;min-width:0;padding:8px 10px 10px;border-radius:8px 0 8px 0;background:rgba(6,12,20,.62);border:1px solid rgba(255,255,255,.08);}
.xpk-sug-head{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--xpk-gold-lt);margin-bottom:6px;padding-left:9px;border-left:3px solid var(--xpk-gold);line-height:1.3;text-shadow:0 1px 3px #000c;}
.xpk-sug-row{display:flex;flex-wrap:wrap;gap:6px;}
.xpk-sug-row .xpk-tile{width:110px;}
.xpk-sug-row .xpk-art{width:110px;height:110px;}
.xpk-sug-row .xpk-pet{width:104px;}
.xpk-sug-row .xpk-pet .xpk-art{width:104px;height:104px;}
.xpk-sug-row .xpk-name{font-size:10px;margin-top:4px;}
.xpk-empty{grid-column:1/-1;text-align:center;color:var(--xpk-text-mid);padding:30px 0;font-size:13px;}
.xpk-tile{cursor:pointer;text-align:center;min-width:0;}
.xpk-art{position:relative;width:110px;height:110px;background:var(--xpk-surface);border:2px solid transparent;box-sizing:border-box;transition:transform .18s ease,filter .18s ease;}
.xpk-tile:hover .xpk-art{transform:translateY(-4px);}
.xpk-clip{position:relative;width:100%;height:100%;border-radius:12px 0 12px 0;overflow:hidden;background:var(--xpk-surface);border:2px solid transparent;transition:border-color .18s ease,box-shadow .18s ease;box-sizing:border-box;container-type:inline-size;}
.xpk-tile:hover .xpk-clip{border-color:var(--tc);}
.xpk-wash{position:absolute;left:0;right:0;bottom:0;height:100%;}
.xpk-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 8%;transform:translateY(-4px) scale(2.068);transform-origin:center 8%;-webkit-mask-image:linear-gradient(to top,transparent 0%,black 24%);mask-image:linear-gradient(to top,transparent 0%,black 24%);}
.xpk-rarity{position:absolute;top:0;right:0;width:76.36%;aspect-ratio:1/1;z-index:2;pointer-events:none;}
.xpk-type{position:absolute;bottom:2px;left:2px;z-index:2;width:21.6px;height:21.6px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));pointer-events:none;}
.xpk-awk{position:absolute;bottom:calc(4px + 24cqw);left:2px;z-index:2;width:24cqw;aspect-ratio:1/1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));pointer-events:none;}
.xpk-name{font-size:10.5px;font-weight:700;margin-top:6px;line-height:1.2;overflow-wrap:anywhere;}

.xpk-pet .xpk-art{width:104px;height:104px;margin:0 auto;border:none;background:none;}
.xpk-pet .xpk-clip{border-radius:12px 0 12px 0;}
.xpk-pet .xpk-wash{inset:0;height:auto;mix-blend-mode:screen;}
.xpk-pet-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.xpk-tile.off{opacity:.35;filter:grayscale(.7);cursor:default;}
.xpk-tile.off:hover .xpk-art{transform:none;}
.xpk-tile.off:hover .xpk-clip{border-color:transparent;}
.xpk-tile.selected .xpk-clip{border-color:var(--xpk-gold);box-shadow:0 0 0 3px var(--xpk-gold),0 0 14px #c8922a99;}

.xpk-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;}
.xpk-count{margin-right:auto;font-size:12px;font-weight:700;color:var(--xpk-text-mid);letter-spacing:.5px;}
.xpk-done{border-color:var(--xpk-gold-dim);color:var(--xpk-gold-lt);}

@media (max-width:760px){
  .xpk-backdrop{padding:8px 6px;}
  .xpk-backdrop.inline{padding:0;}
  .xpk-modal{padding:10px 8px;display:flex;flex-direction:column;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);}
  .xpk-backdrop.inline .xpk-modal{max-height:none;}
  .xpk-head{margin-bottom:8px;gap:6px;flex-shrink:0;}
  .xpk-title{flex:1 1 0;min-width:120px;font-size:18px;letter-spacing:1.5px;}
  .xpk-x{width:36px;height:36px;}
  .xpk-tabs{flex-shrink:0;margin-bottom:8px;}
  .xpk-tabs.tabs-4 .xpk-tab{padding:0 4px;letter-spacing:1px;font-size:12px;}
  .xpk-filters{gap:6px;margin-bottom:8px;flex-shrink:0;}
  .xpk-search{flex:1 1 100%;padding:8px 10px;font-size:16px;}
  .xpk-dd{flex:1 1 calc(50% - 3px);}
  .xpk-dd-trigger{padding:8px 26px 8px 10px;font-size:13px;}
  .xpk-match{flex-shrink:0;margin-bottom:8px;}
  .xpk-chips,.xpk-chips.grouped{max-height:160px;flex-shrink:0;margin-bottom:8px;}
  .xpk-grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px 4px;padding:2px 0 4px;flex:1 1 auto;min-height:0;max-height:none;}
  .xpk-sug-cat{flex:1 1 100%;padding:6px 6px 8px;}
  .xpk-sug-row .xpk-tile,.xpk-sug-row .xpk-pet{width:calc((100% - 18px) / 4);max-width:96px;}
  .xpk-sug-row .xpk-art,.xpk-sug-row .xpk-pet .xpk-art{width:100%;height:auto;}
  .xpk-art,.xpk-pet .xpk-art{width:100%;height:auto;aspect-ratio:1;border-width:1px;}

  .xpk-art::before{content:"";display:block;padding-top:100%;}
  .xpk-art .xpk-clip{position:absolute;inset:0;width:auto;height:auto;}
  .xpk-clip{border-width:1px;}
  .xpk-name{font-size:9.5px;margin-top:3px;line-height:1.15;}
  .xpk-foot{flex-shrink:0;margin-top:8px;}
}