.pepe-de,.pepe-de *{box-sizing:border-box}
.pepe-de{max-width:820px;margin:20px auto;border:1px solid #dce5ec;border-radius:16px;overflow:hidden;background:#fff;color:#19283a;font-family:inherit;line-height:1.55}
.pepe-de button,.pepe-de input,.pepe-de select{font:inherit}
.pepe-de button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pepe-de [hidden]{display:none!important}
.pepe-de-header{text-align:center;padding:24px 15px;background:linear-gradient(115deg,#152d48,#203b62);color:white}
.pepe-de-kicker{color:#f7df9a;letter-spacing:.18em;font-size:12px;font-weight:850}
.pepe-de-header h2{font-size:clamp(22px,5vw,28px);color:white;margin:7px 0 8px;border:0;padding:0;line-height:1.35}
.pepe-de-header p{font-size:14px;color:#e4ebfa;margin:0}
.pepe-de-controls{display:flex;gap:12px;align-items:end;padding:20px 18px 8px;flex-wrap:wrap}
.pepe-de-controls label{display:block;flex:1;min-width:170px;font-weight:750;font-size:13px;color:#35485a}
.pepe-de-controls input,.pepe-de-controls select{display:block;width:100%;margin-top:5px;background:#fff;color:#18243a;border:1px solid #bdcbd9;border-radius:8px;font-size:15px;padding:10px 11px;min-height:44px}
.pepe-de-help{font-size:12px;line-height:1.75;color:#657483;margin:8px 18px 16px;text-align:center}
.pepe-de-pitch{width:min(96%,550px);aspect-ratio:3/4.4;min-height:440px;position:relative;margin:8px auto;background:repeating-linear-gradient(90deg,#187d50 0,#187d50 12.5%,#127148 12.5%,#127148 25%);border:3px solid #d6e8d9;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);overflow:hidden}
.pepe-de-pitch-markings{position:absolute;inset:14px;border:2px solid rgba(246,255,247,.64);pointer-events:none}
.pepe-de-pitch-markings:before{content:"";display:block;position:absolute;top:50%;height:1.5px;width:100%;background:rgba(246,255,247,.60)}
.pepe-de-pitch-center{position:absolute;width:30%;aspect-ratio:1;border:2px solid rgba(246,255,247,.60);border-radius:50%;top:50%;left:35%;transform:translateY(-50%)}
.pepe-de-pitch-top{position:absolute;left:28%;width:44%;height:15%;border:2px solid rgba(246,255,247,.64);border-top:0;top:0}
.pepe-de-pitch-bottom{position:absolute;left:28%;width:44%;height:15%;border:2px solid rgba(246,255,247,.64);border-bottom:0;bottom:0}
.pepe-de-slot{position:absolute;transform:translate(-50%,-50%);width:clamp(43px,14%,77px);padding:0;border:0;background:none;color:#fff;text-align:center;line-height:1.15;min-width:0;z-index:2}
.pepe-de-slot:focus-visible .pepe-de-slot-card{outline:3px solid #ffe68c;outline-offset:3px}
.pepe-de-slot-card{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;aspect-ratio:4/5.3;border:2px solid #ecce84;border-radius:6px;background:linear-gradient(150deg,#314d79,#142441 85%);overflow:hidden;box-shadow:0 3px 9px rgba(0,0,0,.45);color:#f5e0a8;font-size:26px;font-weight:900}
.pepe-de-slot-card img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;background:#1d3453}
.pepe-de-slot-placeholder{display:block;max-width:100%;font-size:clamp(15px,3vw,25px)}
.pepe-de-slot-position{position:absolute;bottom:0;left:0;right:0;display:block;background:rgba(8,18,33,.86);color:#ffefb9;font-size:clamp(8px,1.9vw,12px);font-weight:850;padding:2px 1px}
.pepe-de-slot-name{font-weight:850;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:white;background:rgba(9,28,36,.88);font-size:clamp(8px,2vw,11px);padding:2px 0;margin-top:2px;border-radius:3px;text-shadow:0 1px 2px black}
.pepe-de-slot-apt{display:block;font-size:9px;color:#fff1d3;background:rgba(28,40,51,.9);max-width:52px;margin:1px auto 0;border-radius:2px}
.pepe-de-slot-apt.pepe-de-best{color:#fed763}.pepe-de-slot-apt.pepe-de-half{color:#e4f8ff}
.pepe-de-progress{margin:14px 0 4px;text-align:center;font-size:15px;font-weight:850}
.pepe-de-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.pepe-de-buttons button,.pepe-de-more,.pepe-de-remove{background:#d1a040;color:#15243e;border:0;border-radius:9px;font-size:16px;font-weight:850;padding:13px 15px;min-height:45px}
.pepe-de-buttons .pepe-de-secondary,.pepe-de-secondary{background:#eef3f8!important;color:#294663!important;border:1px solid #bed0df!important}
.pepe-de-status{margin:4px 16px;text-align:center;font-weight:700;font-size:13px;color:#285181;min-height:22px}
.pepe-de-error{font-size:14px;color:#a32120;background:#fff1ef;padding:12px;margin:12px;border-radius:9px}
.pepe-de-dialog,.pepe-de-export-dialog{position:fixed;inset:0;z-index:999999;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;background:rgba(5,17,31,.72);padding:12px}
.pepe-de-dialog-panel,.pepe-de-export-panel{width:min(100%,550px);margin:auto;max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:14px;color:#172742;padding:16px;box-shadow:0 15px 60px rgba(0,0,0,.3)}
.pepe-de-dialog-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:19px;margin-bottom:12px}
.pepe-de-dialog-top button,.pepe-de-export-close{border:0;border-radius:7px;background:#eef2f7;color:#253d53;min-width:44px;min-height:42px;font-size:23px;font-weight:700}
.pepe-de-dialog-panel input[type=search]{display:block;width:100%;height:46px;padding:10px;border:1px solid #aabbcc;border-radius:8px;font-size:15px;background:white;color:#1b2d44}
.pepe-de-onlyfit{display:flex;align-items:center;gap:8px;margin:11px 0;font-size:13px}
.pepe-de-onlyfit input{width:18px;height:18px;flex-shrink:0}
.pepe-de-results{max-height:min(56vh,520px);overflow-y:auto;overscroll-behavior:contain;border:1px solid #e7e9f0;border-radius:10px}
.pepe-de-choice{display:flex;align-items:center;width:100%;min-height:82px;text-align:left;border:0;border-bottom:1px solid #e6ebf1;background:white;padding:9px 8px;gap:10px;color:#22364e}
.pepe-de-choice:hover,.pepe-de-choice:focus-visible{background:#f0f7ff}
.pepe-de-choice-image,.pepe-de-choice-icon{flex:0 0 50px;width:50px;height:66px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:linear-gradient(120deg,#304f78,#142741);color:#f7d280;font-size:15px;font-weight:900;object-fit:contain}
.pepe-de-choice-info{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px}
.pepe-de-choice-info strong{font-size:15px;line-height:1.3;color:#172a40}
.pepe-de-choice-info span{font-size:12px;color:#43566c}
.pepe-de-choice-info small{font-size:11px;color:#718098}
.pepe-de-empty,.pepe-de-loading{padding:16px 12px;font-size:14px;color:#66788b}
.pepe-de-more,.pepe-de-remove{display:block;width:100%;margin-top:11px;font-size:14px}
.pepe-de-export-panel{max-width:650px;text-align:center}
.pepe-de-export-close{display:block;margin:0 0 8px auto;font-size:15px;padding:9px 12px}
.pepe-de-export-panel img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#102748;border-radius:6px;margin:10px auto}
.pepe-de-export-panel a{display:block;background:#d8a644;color:#102a4b;padding:14px;font-weight:900;text-decoration:none;border-radius:9px}
body.pepe-de-dialog-open{overflow:hidden}
@media(max-width:560px){.pepe-de{border-radius:10px;margin:12px 0}.pepe-de-header{padding:17px 12px}.pepe-de-controls{padding:14px 12px 5px;gap:8px}.pepe-de-controls label{min-width:140px;flex:1}.pepe-de-pitch{width:100%;aspect-ratio:3/4.65;border-radius:4px;min-height:450px}.pepe-de-pitch-markings{inset:9px}.pepe-de-buttons button{font-size:14px;padding:12px 10px}.pepe-de-dialog{padding:5px}.pepe-de-dialog-panel{max-height:calc(100vh - 10px);padding:13px}.pepe-de-slot{width:13.8%}.pepe-de-slot-name{font-size:8px}.pepe-de-slot-apt{font-size:8px}}

.pepe-de-sortlabel{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:750;margin:0 0 10px}
.pepe-de-sortlabel select{min-height:36px;flex:1;padding:6px 8px;border:1px solid #adbdcc;border-radius:7px;background:#fff;color:#20374c;font-size:13px}

/* Legend marker and searchable legend-only filter (v1.3.0). */
.pepe-de-legend-badge{display:block;font-size:9px;font-weight:900;letter-spacing:.02em;color:#ffe99b;background:#653616;border-radius:3px;margin:2px auto 0;max-width:60px}
.pepe-de-onlylegend{display:flex;align-items:center;gap:8px;margin:9px 0 8px;font-size:13px;font-weight:750;color:#5c3d0c}
.pepe-de-onlylegend input{width:18px;height:18px;flex-shrink:0}
@media(max-width:560px){.pepe-de-legend-badge{font-size:8px}}


/* ETERNAL is a distinct regular-DB series, not subject to legend's 3-card cap. */
.pepe-de-eternal-badge{display:block;font-size:9px;font-weight:900;color:#d7f7ff;background:#205b7a;border-radius:3px;margin:2px auto 0;max-width:68px}
.pepe-de-onlyeternal{display:flex;align-items:center;gap:8px;margin:9px 0 8px;font-size:13px;font-weight:750;color:#1b5b77}
.pepe-de-onlyeternal input{width:18px;height:18px;flex-shrink:0}
@media(max-width:560px){.pepe-de-eternal-badge{font-size:8px}}

/* v1.7.0: smartphone pitch legibility - more than 45% wider card images.
   The longer pitch keeps the 11-card arrangement readable without horizontal swiping. */
@media (max-width:560px) {
  .pepe-de .pepe-de-pitch {
    width:100%;
    aspect-ratio:3/6.15;
    min-height:660px;
    overflow:hidden;
  }
  .pepe-de .pepe-de-slot {
    width:20.5%;
    max-width:none;
  }
  .pepe-de .pepe-de-slot-card {
    border-width:2px;
    border-radius:5px;
  }
  .pepe-de .pepe-de-slot-position {
    font-size:clamp(9px,2.5vw,11px);
    padding:2px 0;
  }
  .pepe-de .pepe-de-slot-name {
    font-size:clamp(9px,2.45vw,11px);
    line-height:1.15;
    margin-top:2px;
    padding:2px 1px;
  }
  .pepe-de .pepe-de-slot-apt {
    font-size:9px;
    line-height:1.25;
    max-width:90%;
    padding:1px 0;
  }
  /* Badges float on the card instead of using a separate row below it. */
  .pepe-de .pepe-de-legend-badge,
  .pepe-de .pepe-de-eternal-badge {
    position:absolute;
    top:4px;
    right:1px;
    z-index:3;
    margin:0;
    max-width:calc(100% - 2px);
    padding:1px 2px;
    font-size:8px;
    line-height:1.2;
  }
  /* Compact triangle of the 4-4-2-I: avoid overlap among CMF / DMF / CMF. */
  .pepe-de[data-de-layout="442i"] .pepe-de-slot[data-de-key="lcm"] {left:27% !important;}
  .pepe-de[data-de-layout="442i"] .pepe-de-slot[data-de-key="rcm"] {left:73% !important;}
}

/* v1.7: merge the aptitude marker into the in-card position label on phones. */
.pepe-de-pos-mobile-apt{display:none}
@media (max-width:560px) {
  .pepe-de .pepe-de-pos-mobile-apt{display:inline;font-size:inherit;color:#ffdb81}
  .pepe-de .pepe-de-slot-apt{display:none}
}

/* v1.8: カードDBに合わせた3条件フィルター。スマホでも1行を詰め込まず表示。 */
.pepe-de-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:10px 0 12px}
.pepe-de-filter-grid label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;font-weight:800;color:#304560}
.pepe-de-filter-grid select{display:block;width:100%;min-width:0;min-height:42px;padding:8px 5px;border:1px solid #adbdcc;border-radius:8px;background:#fff;color:#20374c;font-size:13px}
@media(max-width:560px){.pepe-de-filter-grid{grid-template-columns:1fr 1fr;gap:8px}.pepe-de-filter-grid label:first-child{grid-column:1/-1}.pepe-de-filter-grid select{font-size:14px;padding:9px 7px}}

/* v1.13.0: card preview + article links + explicit selection actions */
.pepe-de-preview{position:fixed;inset:0;z-index:1000000;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;background:rgba(5,17,31,.78);padding:8px}
.pepe-de-preview-panel{width:min(100%,570px);margin:auto;max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#172742;border-radius:14px;padding:14px;box-shadow:0 18px 65px rgba(0,0,0,.4)}
.pepe-de-preview-image-wrap{display:flex;align-items:center;justify-content:center;background:#132442;border-radius:10px;padding:8px;min-height:180px}
.pepe-de-preview-image-wrap img{display:block;max-width:100%;width:auto;max-height:52vh;object-fit:contain;background:#132442;border-radius:7px}
.pepe-de-preview-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0 12px;text-align:left}
.pepe-de-preview-fact{min-width:0;background:#f3f6fa;border-radius:7px;padding:8px 10px;overflow-wrap:anywhere}
.pepe-de-preview-label{display:block;color:#536982;font-size:11px;font-weight:750}
.pepe-de-preview-value{display:block;font-size:13px;line-height:1.4;color:#182f4c}
.pepe-de-preview-link{display:block;text-align:center;background:#eaf4fc;color:#164d88;text-decoration:underline;border-radius:8px;padding:12px;margin:6px 0 10px;font-size:14px;font-weight:800}
.pepe-de-preview-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.pepe-de-preview-actions button{flex:1 1 145px;border:0;border-radius:8px;padding:13px 10px;min-height:46px;font-size:15px;font-weight:850}
.pepe-de-preview-actions .pepe-de-primary{background:#d1a040;color:#142b47}
.pepe-de-choice{min-height:112px;padding:10px 8px;gap:9px}
.pepe-de-choice-thumb{border:0;background:transparent;padding:0;flex:0 0 72px;align-self:flex-start;min-height:45px;color:#294663}
.pepe-de-choice-thumb .pepe-de-choice-image,.pepe-de-choice-thumb .pepe-de-choice-icon{display:block;object-fit:contain;width:72px;height:94px;border-radius:7px;border:1px solid #bed0df}
.pepe-de-choice-thumb .pepe-de-choice-icon{display:flex;align-items:center;justify-content:center}
.pepe-de-thumb-hint{display:block;text-align:center;font-size:11px;padding:3px 0;color:#2a5989;font-weight:850}
.pepe-de-choice-content{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.pepe-de-choice-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pepe-de-choice-actions button,.pepe-de-choice-actions a{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:8px 9px;min-height:40px;font-size:12px;font-weight:850;border:1px solid #cad5e4;text-decoration:none;line-height:1.25}
.pepe-de-inspect,.pepe-de-article{background:#f3f7fb;color:#25496d}
.pepe-de-pick{background:#d1a040;color:#172d48;border-color:#bd8e35!important}
.pepe-de-choice-actions button:focus-visible,.pepe-de-choice-actions a:focus-visible,.pepe-de-choice-thumb:focus-visible{outline:3px solid #437ec2;outline-offset:2px}
@media(max-width:560px){
  .pepe-de-choice-thumb{flex-basis:66px}
  .pepe-de-choice-thumb .pepe-de-choice-image,.pepe-de-choice-thumb .pepe-de-choice-icon{width:66px;height:87px}
  .pepe-de-preview{padding:4px}
  .pepe-de-preview-panel{padding:12px;max-height:calc(100vh - 8px)}
  .pepe-de-preview-image-wrap img{max-height:48vh}
  .pepe-de-preview-facts{gap:5px}
  .pepe-de-preview-fact{padding:7px}
  .pepe-de-choice-actions button,.pepe-de-choice-actions a{font-size:12px}
}

/* v1.14: optional non-select cards (deck consultation). */
.pepe-de-onlyskill{display:flex;align-items:center;gap:8px;margin:8px 0 7px;font-size:14px;font-weight:800;color:#1f5178}
.pepe-de-onlyskill input{width:18px;height:18px;flex-shrink:0}