.card-profile{display:grid;grid-template-columns:43% minmax(0,1fr);gap:20px;margin:18px 0 20px;align-items:start}
.card-profile .profile-image{display:block;position:relative;width:100%;height:auto;aspect-ratio:0.716;margin:0;padding:0;border:0;border-radius:9px;background:transparent!important;overflow:hidden;cursor:zoom-in}
.card-profile .profile-image img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.profile-main{padding-top:9px;min-width:0}.profile-main .detail-name{font-size:25px;line-height:1.25;letter-spacing:-.5px;overflow-wrap:anywhere}.original-name{font-size:13px;color:#7c8087;margin:9px 0 13px;overflow-wrap:anywhere}.original-name small{font-size:9px;display:block;margin-top:4px}
.profile-tags,.identity-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:9px 0}.profile-tags span,.identity-tags b,.identity-tags span{background:#eae9e5;padding:5px 7px;border-radius:5px;font-size:12px;font-weight:600;color:#292b2f}.identity-tags b{font-size:12px;overflow-wrap:anywhere}.identity-tags .regulation-mark{border:1.5px solid #25282e;background:transparent;padding:2px 5px;border-radius:5px}
.series-link{display:flex;width:100%;gap:9px;align-items:center;text-align:left;padding:9px;border:0;border-radius:10px;background:#eae9e5;margin-top:14px;color:inherit;cursor:pointer}.series-link img{width:32px;height:40px;object-fit:contain;border-radius:5px}.series-link span{flex:1;min-width:0}.series-link small{display:block;color:#93969c;font-size:11px;margin-bottom:3px}.series-link strong{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}.series-link>b{font-size:23px;font-weight:400;color:#92979d}
.zoom-caption{position:absolute;right:6px;bottom:9px;padding:5px 8px;border:1px solid #888;background:#fffc;border-radius:20px;font-size:11px;color:#17191d}
.related-strip{display:flex;align-items:center;gap:12px;margin:22px 0 28px;overflow-x:auto}.related-thumb{flex:0 0 45px;height:65px;padding:2px;border:1px solid transparent;border-radius:5px}.related-thumb.selected{border-color:#272b31}.related-thumb img{height:100%;width:100%;object-fit:contain}.related-label{margin-left:auto;font-size:11px;color:#8c929b;white-space:nowrap;text-align:center}.related-label small{font-size:9px}
.profile-section{background:#fff;border-radius:14px;padding:20px;margin:15px 0}.profile-section h2{font-size:16px;margin:0;font-weight:700}.profile-section p{font-size:13px;line-height:1.85;margin:10px 0 0;overflow-wrap:anywhere}.species-heading{font-size:11px;letter-spacing:1px;color:#98907d;margin-top:15px}.source-caption{display:block;font-size:10px;line-height:1.6;color:#9299a3;margin-top:10px}.attack-row{padding:16px 0;border-bottom:1px solid #eff0f3}.attack-row:last-child{border:0;padding-bottom:0}.attack-row strong,.attack-row b{font-size:14px}.hp-value{font-size:13px;font-weight:700;color:#cc6755}.profile-facts .row{gap:20px}.profile-facts .row>span:last-child{text-align:right;overflow-wrap:anywhere}
.card-zoom{padding:30px 12px 12px;background:transparent;border:0;width:min(90vw,470px);max-height:90vh;overflow:visible}.card-zoom::backdrop{background:#161a22dd}.card-zoom img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain}.card-zoom button{position:absolute;right:8px;top:-8px;border:0;border-radius:50%;background:#fff;width:30px;height:30px;font-size:24px;cursor:pointer}
.related-label{border:0;background:transparent;cursor:pointer;flex:0 0 42px;line-height:1.7}

/* Keep the card preview secondary to the card facts on the detail page. */
.page:has(.card-profile) .card-profile {
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 18px;
  margin: 8px 0 12px;
}
.page:has(.card-profile) .profile-main { padding-top: 2px; }
.page:has(.card-profile) .profile-main .detail-name { font-size: 22px; }
.page:has(.card-profile) .original-name { margin: 4px 0 7px; }
.page:has(.card-profile) .profile-tags,
.page:has(.card-profile) .identity-tags { gap: 5px; margin: 5px 0; }
.page:has(.card-profile) .profile-tags span,
.page:has(.card-profile) .identity-tags b,
.page:has(.card-profile) .identity-tags span { padding: 3px 6px; font-size: 10px; }
.page:has(.card-profile) .series-link { margin-top: 8px; padding: 6px 8px; }
.page:has(.card-profile) .related-strip { margin: 8px 0 12px; }
.page:has(.card-profile) .related-thumb { flex-basis: 34px; height: 49px; }
.page:has(.card-profile) .profile-section { margin: 8px 0; padding: 12px 14px; border-radius: 8px; }
.page:has(.card-profile) .profile-section h2 { font-size: 13px; }
.page:has(.card-profile) .profile-section p { margin-top: 6px; font-size: 11px; line-height: 1.55; }
.page:has(.card-profile) .attack-row { padding: 8px 0; }
.page:has(.card-profile) .more-quotes > summary { padding: 8px 0; color: #737983; font-size: 10px; cursor: pointer; }
.page:has(.card-profile) .more-quotes[open] > summary { border-bottom: 1px solid #eff0f3; }
.page:has(.card-profile) .source-caption { margin-top: 5px; font-size: 9px; }
.page:has(.card-profile) .profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 8px 12px; }
.page:has(.card-profile) .profile-facts .row { min-width: 0; gap: 8px; padding: 5px 0; font-size: 10px; }
.page:has(.card-profile) .wide { margin-top: 8px; padding: 10px 14px; }

@media (min-width: 761px) {
  .page:has(.card-profile) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .page:has(.card-profile) > .back,
  .page:has(.card-profile) > .detail-status,
  .page:has(.card-profile) > .card-profile,
  .page:has(.card-profile) > .related-strip,
  .page:has(.card-profile) > .card-zoom { grid-column: 1 / -1; }
  .page:has(.card-profile) > .profile-facts { grid-column: 1 / -1; }
  .page:has(.card-profile) .card-profile { grid-template-columns: 132px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .page:has(.card-profile) .card-profile { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; }
  .page:has(.card-profile) .profile-main .detail-name { font-size: 18px; }
  .page:has(.card-profile) .series-link img { width: 25px; height: 32px; }
  .page:has(.card-profile) .zoom-caption { right: 2px; bottom: 3px; padding: 3px 5px; font-size: 9px; }
  .page:has(.card-profile) .profile-section { margin: 7px 0; padding: 10px 11px; }
  .page:has(.card-profile) .profile-section p { font-size: 10px; }
  .page:has(.card-profile) .profile-facts { gap: 0 10px; padding: 7px 9px; }
  .page:has(.card-profile) .profile-facts .row { font-size: 9px; }
}
@media(min-width:700px){.card-profile{grid-template-columns:170px minmax(0,1fr);gap:25px}.profile-main .detail-name{font-size:28px}}