@font-face{font-family:Chicago_12;src:url("fonts/ChiKareGo2.woff") format("woff");src:url("fonts/ChiKareGo2.woff2") format("woff2");font-display:swap}@font-face{font-family:Monaco;src:url("fonts/monaco.woff") format("woff");src:url("fonts/monaco.woff2") format("woff2");font-display:swap}:root{--black:#000;--white:#fff;--pink:#ffe0f3;--soft-pink:#fff7fc;--hot-pink:#ff8fcc;--shadow:3px 3px var(--black)}*{box-sizing:border-box}body{margin:0;background:var(--pink);color:var(--black);font-family:"Inconsolata",Monaco,monospace;font-size:15px;overflow-x:hidden}body.modal-open{overflow:hidden}::-webkit-scrollbar,*::-webkit-scrollbar{width:22px;height:22px;background-color:var(--white)}::-webkit-scrollbar-button,*::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-track,*::-webkit-scrollbar-track{background:linear-gradient(45deg,var(--black) 25%,transparent 25%,transparent 75%,var(--black) 75%,var(--black)),linear-gradient(45deg,var(--black) 25%,transparent 25%,transparent 75%,var(--black) 75%,var(--black));background-color:var(--white);background-size:4px 4px;background-position:0 0,2px 2px;border-left:3px solid var(--black)}::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background-color:var(--white);border:2px solid var(--black);border-right:none}::-webkit-scrollbar-corner,*::-webkit-scrollbar-corner{background:var(--white)}a{color:#0000ee}button,input,select{font:inherit}code{background:var(--soft-pink);border:1px solid var(--black);padding:0 3px}ul.menu-bar{margin:0;padding:0;list-style:none;cursor:pointer;font-family:Chicago_12,monospace;font-size:14px;display:flex;background:var(--white);border-bottom:2px solid var(--black);position:sticky;top:0;z-index:999}ul.menu-bar>.menu-item{position:relative;padding:6px 10px}ul.menu-bar>.menu-item:hover,ul.menu-bar>.menu-item:focus-within{background:var(--black);color:var(--white)}ul.menu{display:none;list-style:none;padding:0;margin:0;min-width:190px;background:var(--white);color:var(--black);border:1px solid var(--black);box-shadow:2px 2px var(--black);position:absolute;left:0;top:100%}.menu-item:hover>ul.menu,.menu-item:focus-within>ul.menu{display:block}ul.menu li a{display:block;padding:5px 20px;color:var(--black);text-decoration:none}ul.menu li a:hover{background:var(--black);color:var(--white)}.page-wrap{width:min(1500px,calc(100vw - 28px));margin:30px auto 42px}.window{background:var(--white);border:2px solid var(--black);box-shadow:var(--shadow)}.title-bar{display:flex;align-items:center;height:26px;padding:2px 4px;background:linear-gradient(var(--black) 50%,transparent 50%);background-size:100% 4px;background-clip:content-box}.title-bar .title{background:var(--white);padding:0 8px;margin:0 auto;font-family:Chicago_12,monospace;font-size:16px;line-height:1;text-align:center;white-space:nowrap}.title-bar button{width:18px;height:18px;min-width:0;background:var(--white);border:2px solid var(--black);padding:0;cursor:pointer}.title-bar button:hover{background:var(--black)}.title-bar .resize{background:linear-gradient(var(--black) 0 0) left 60%/70% 2px no-repeat,linear-gradient(var(--black) 0 0) 60% top/2px 70% no-repeat,var(--white)}.separator{border-top:2px solid var(--black)}.window-content{padding:12px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(rgba(255,143,204,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,143,204,.12) 1px,transparent 1px),var(--soft-pink);background-size:20px 20px}.hero-content h1{font-family:Chicago_12,monospace;font-size:clamp(34px,5vw,58px);margin:0 0 8px}.hero-content p{margin:0;max-width:720px;line-height:1.35}.dex-stats{display:grid;grid-template-columns:repeat(2,100px);gap:10px}.dex-stats div{border:2px solid var(--black);background:var(--white);box-shadow:2px 2px var(--black);padding:10px;text-align:center}.dex-stats strong{display:block;font-family:Chicago_12,monospace;font-size:24px}.dex-stats span{font-size:12px}.dex-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}.left-stack,.main-stack{min-width:0;display:flex;flex-direction:column;gap:18px}.controls{display:flex;flex-direction:column;gap:9px}.controls label{font-family:Chicago_12,monospace;font-size:13px}.search-box,.controls select{width:100%;border:2px solid var(--black);background:var(--white);padding:8px 10px;outline:none}.site-btn{background:var(--white);border:2px solid var(--black);box-shadow:2px 2px var(--black);color:var(--black);cursor:pointer;padding:7px 10px;text-align:center;text-decoration:none}.site-btn:hover{background:var(--black);color:var(--white)}.note-list{display:flex;flex-direction:column;gap:9px}.note-card{border:2px solid var(--black);background:var(--white);padding:10px;box-shadow:2px 2px var(--black);line-height:1.35}.note-title{font-family:Chicago_12,monospace;font-size:13px;margin-bottom:5px}.dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.creature-card{border:2px solid var(--black);background:var(--white);color:var(--black);box-shadow:2px 2px var(--black);cursor:pointer;padding:8px;text-align:left;min-height:225px;display:flex;flex-direction:column}.creature-card:hover,.creature-card:focus-visible{background:var(--black);color:var(--white);outline:none}.creature-card.is-owned{background:var(--soft-pink)}.creature-card.is-owned:hover{background:var(--black)}.thumb-box{height:105px;border:2px solid currentColor;background:radial-gradient(circle at 25% 24%,rgba(255,143,204,.45) 0 18%,transparent 19%),radial-gradient(circle at 80% 78%,rgba(255,143,204,.28) 0 17%,transparent 18%),repeating-linear-gradient(45deg,transparent 0 9px,rgba(0,0,0,.05) 9px 11px),var(--soft-pink);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}.thumb-box img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto}.image-placeholder{font-family:Chicago_12,monospace;font-size:12px;text-align:center;padding:8px}.card-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.priority{border:1px solid currentColor;padding:1px 4px}.priority.high{background:var(--hot-pink)}.priority.medium{background:var(--soft-pink)}.priority.low{background:var(--white)}.creature-card h2{font-family:Chicago_12,monospace;font-size:14px;line-height:1.15;margin:7px 0 6px}.creature-card p{font-size:12px;line-height:1.25;margin:0 0 4px}.empty-card{border:2px solid var(--black);background:var(--soft-pink);box-shadow:2px 2px var(--black);padding:14px;line-height:1.35}.modal-backdrop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:18px}.modal-click-catcher{position:absolute;inset:0;background:rgba(0,0,0,.35)}.profile-window{position:relative;width:min(920px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto}.profile-content{background:linear-gradient(rgba(255,143,204,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,143,204,.10) 1px,transparent 1px),var(--soft-pink);background-size:22px 22px}.profile-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}.profile-top h2{font-family:Chicago_12,monospace;font-size:clamp(24px,4vw,42px);line-height:1.1;margin:0 0 8px}.viewer-meta{display:flex;flex-wrap:wrap;gap:6px}.viewer-pill{border:2px solid var(--black);background:var(--white);padding:3px 7px;font-size:13px}.profile-details{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px;margin:12px 0}.profile-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}.phase-card{margin:0;border:2px solid var(--black);background:var(--white);box-shadow:2px 2px var(--black);padding:10px}.phase-image-wrap{min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--soft-pink);border:2px solid var(--black);padding:10px}.phase-image-wrap img{max-width:100%;max-height:220px;object-fit:contain}.phase-card figcaption{font-family:Chicago_12,monospace;font-size:13px;text-align:center;margin-top:8px}@media(max-width:900px){.dex-layout{grid-template-columns:1fr}.hero-content{display:block}.dex-stats{grid-template-columns:repeat(2,1fr);margin-top:14px}.profile-details{grid-template-columns:1fr}}@media(max-width:560px){.page-wrap{width:min(100vw - 18px,1500px);margin-top:18px}ul.menu-bar{overflow-x:auto}.dex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.creature-card{min-height:210px}.profile-images{grid-template-columns:1fr}.profile-top{grid-template-columns:1fr}.dex-stats{grid-template-columns:1fr}.modal-backdrop{padding:9px}.profile-window{width:calc(100vw - 18px);max-height:calc(100vh - 18px)}}

/* Important: keep the profile overlay closed until a creature card is clicked. */
[hidden] {
  display: none !important;
}

.loading-card {
  grid-column: 1 / -1;
}
.load-more-card{grid-column:1/-1;cursor:pointer;text-align:center;font-family:Chicago_12,monospace}.load-more-card:hover{background:var(--black);color:var(--white)}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:0 0 14px}.pager:last-child{margin:14px 0 0}.pager-btn{min-width:38px}.pager-btn.active,.pager-btn:disabled{background:var(--black);color:var(--white);cursor:default;opacity:1}.pager-btn:disabled{box-shadow:1px 1px var(--black)}

.want-tags{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}.want-tags span,.modal-tags span{display:inline-block;border:1px solid currentColor;background:var(--soft-pink);padding:2px 5px;font-size:11px;line-height:1.1}.creature-card:hover .want-tags span,.creature-card:focus-visible .want-tags span{background:var(--black);color:var(--white)}.status-line{font-weight:bold}.card-notes{opacity:.85}.modal-tags{display:flex;flex-wrap:wrap;gap:6px}.profile-details{grid-template-columns:190px 220px minmax(0,1fr)}@media(max-width:900px){.profile-details{grid-template-columns:1fr}}

.status-line{margin-top:6px}.status-badge{display:inline-block;border:2px solid currentColor;background:var(--soft-pink);padding:2px 6px;font-family:Chicago_12,monospace;font-size:11px;line-height:1.1}.status-badge.owned{background:var(--hot-pink)}.status-badge.wanted{background:var(--white)}.creature-card:hover .status-badge,.creature-card:focus-visible .status-badge{background:var(--black);color:var(--white)}

/* Clean wishlist card display: status/gender live in profile + filters, not duplicated on cards. */
.status-line,
.status-badge {
  display: none !important;
}
.owned-corner {
  display: inline-block;
  width: fit-content;
  border: 1px solid currentColor;
  background: var(--soft-pink);
  padding: 2px 5px;
  margin: 0 0 5px;
  font-family: Chicago_12, monospace;
  font-size: 11px;
  line-height: 1.1;
}
.creature-card:hover .owned-corner,
.creature-card:focus-visible .owned-corner {
  background: var(--black);
  color: var(--white);
}
#modalCloseBtn {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.profile-window {
  z-index: 2;
}
.modal-click-catcher {
  z-index: 1;
}


/* Restored working modal system */
.profile-modal[hidden] { display: none !important; }
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 18px;
}
.profile-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,.55);
}
.profile-modal .modal-window {
  position: relative;
  z-index: 1;
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
}
.profile-modal .title-bar button[data-close-modal] {
  pointer-events: auto;
  cursor: pointer;
}
.profile-modal .modal-content {
  background: linear-gradient(rgba(255,143,204,.10) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,143,204,.10) 1px, transparent 1px),
              var(--soft-pink);
  background-size: 18px 18px;
}
@media(max-width:560px){.profile-modal{padding:9px}}

/* Bestiary-style single profile additions */
.profile-section {
  margin-top: 14px;
}
.section-heading {
  font-family: Chicago_12, monospace;
  font-size: 15px;
  border: 2px solid var(--black);
  background: var(--white);
  box-shadow: 2px 2px var(--black);
  display: inline-block;
  padding: 5px 8px;
  margin-bottom: 10px;
}
.text-panel {
  border: 2px solid var(--black);
  background: var(--white);
  box-shadow: 2px 2px var(--black);
  padding: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.info-grid .wide {
  grid-column: 1 / -1;
}
.breeding-recipes {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.recipe-card {
  border: 2px solid var(--black);
  background: var(--white);
  box-shadow: 2px 2px var(--black);
  padding: 12px;
  text-align: center;
}
.recipe-parents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.recipe-link,
.recipe-name {
  border: 2px solid var(--black);
  background: var(--soft-pink);
  color: var(--black);
  padding: 5px 8px;
  text-decoration: none;
  display: inline-block;
}
.recipe-link {
  cursor: pointer;
  box-shadow: 1px 1px var(--black);
}
.recipe-link:hover,
.recipe-link:focus-visible {
  background: var(--black);
  color: var(--white);
}
.recipe-plus,
.recipe-arrow {
  font-family: Chicago_12, monospace;
  font-size: 18px;
}
.recipe-arrow {
  margin: 9px 0;
}
.recipe-result {
  font-family: Chicago_12, monospace;
  font-size: 14px;
}
.recipe-result span {
  font-family: Inconsolata, Monaco, monospace;
  font-size: 12px;
}


/* Cleaner bestiary profile layout: section names are plain headers, not boxed buttons */
.profile-modal .modal-content {
  padding: 14px;
}
.profile-modal .profile-top {
  border-bottom: 2px solid var(--black);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.profile-modal .profile-top h2 {
  margin-bottom: 6px;
}
.profile-section {
  margin-top: 18px;
}
.section-heading {
  display: block;
  border: 0;
  border-bottom: 2px solid var(--black);
  box-shadow: none;
  background: transparent;
  padding: 0 0 5px;
  margin: 0 0 12px;
  font-family: Chicago_12, monospace;
  font-size: 18px;
  text-transform: lowercase;
}
.profile-images-section {
  margin-top: 8px;
}
.profile-images-section .section-heading {
  display: none;
}
.profile-images {
  margin-top: 8px;
}
.profile-modal .profile-details,
.profile-modal .info-grid,
.profile-modal .breeding-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.profile-modal .note-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  line-height: 1.35;
}
.profile-modal .note-title {
  font-family: Chicago_12, monospace;
  font-size: 13px;
  margin-bottom: 4px;
  text-transform: lowercase;
}
.profile-modal .modal-tags span {
  border: 1px solid var(--black);
  background: var(--white);
  padding: 2px 6px;
  font-size: 12px;
}
.text-panel {
  background: rgba(255,255,255,.75);
  border: 2px solid var(--black);
  box-shadow: 2px 2px var(--black);
  padding: 12px;
}
.breeding-summary {
  margin-bottom: 10px !important;
}
.breeding-recipes .empty-card {
  box-shadow: none;
  background: rgba(255,255,255,.55);
}
.recipe-card {
  background: var(--white);
}
@media(max-width:560px){
  .section-heading { font-size: 16px; }
  .profile-modal .modal-content { padding: 10px; }
}
.recipe-cost {
  margin-top: 8px;
  font-size: 13px;
  font-weight: bold;
}

/* MagiStream-style bestiary notes + compact breeding lists */
.bestiary-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 18px;
}
.bestiary-notes-grid .note-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.breeding-lines {
  margin-top: 6px;
}
.recipe-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--black);
  background: rgba(255,255,255,.75);
  box-shadow: 2px 2px var(--black);
}
.recipe-list li {
  padding: 7px 9px;
  border-bottom: 1px solid var(--black);
  line-height: 1.35;
}
.recipe-list li:last-child {
  border-bottom: 0;
}
.recipe-list .recipe-link,
.recipe-list .recipe-name {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.recipe-list .recipe-link:hover,
.recipe-list .recipe-link:focus-visible {
  background: var(--black);
  color: var(--white);
}
.recipe-equals,
.recipe-plus {
  font-family: Chicago_12, monospace;
  font-size: 13px;
  font-weight: bold;
}
.recipe-form,
.recipe-cost-inline {
  font-size: 12px;
}
.recipe-cost-inline {
  font-weight: bold;
}
.compact-text-panel {
  line-height: 1.35;
}
.compact-empty {
  box-shadow: none;
  background: rgba(255,255,255,.55);
  padding: 10px;
}

/* Keep the creature profile title bar fixed while only the profile body scrolls. */
.profile-modal .modal-window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.profile-modal .title-bar,
.profile-modal .separator {
  flex: 0 0 auto;
}
.profile-modal .modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.profile-modal .profile-title-bar .profile-nav-btn {
  width: 22px;
  height: 18px;
  min-width: 22px;
  margin: 0 4px;
  background: var(--white);
  border: 2px solid var(--black);
  padding: 0;
  line-height: 12px;
  font-family: Chicago_12, monospace;
  cursor: pointer;
}
.profile-modal .profile-title-bar .profile-nav-btn:hover:not(:disabled) {
  background: var(--black);
  color: var(--white);
}
.profile-modal .profile-title-bar .profile-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* Fixed stat counter boxes: the page range needs a wider second card. */
.dex-stats {
  grid-template-columns: 110px 165px;
  max-width: 285px;
}
.dex-stats div {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.dex-stats strong {
  display: block;
  max-width: 100%;
  font-size: 20px;
  line-height: 1.05;
  white-space: nowrap;
  letter-spacing: -0.03em;
}
.dex-stats span {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .dex-stats {
    max-width: none;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}
@media (max-width: 560px) {
  .dex-stats {
    grid-template-columns: 1fr;
  }
  .dex-stats strong {
    font-size: 22px;
    letter-spacing: 0;
  }
}

/* Requested cleanup: only show the current page range counter. */
.dex-stats {
  grid-template-columns: 165px !important;
  max-width: 165px !important;
}
@media (max-width: 900px) {
  .dex-stats {
    max-width: 165px !important;
    grid-template-columns: 165px !important;
    margin-left: auto;
  }
}
@media (max-width: 560px) {
  .dex-stats {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    margin-left: 0;
  }
}

/* Larger, easier-to-read creature profile text */
.profile-modal .modal-content {
  font-size: 16px;
  line-height: 1.55;
}

.profile-modal .profile-top h2 {
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: 1.08;
}

.profile-modal .viewer-pill {
  font-size: 15px;
  padding: 4px 8px;
}

.profile-modal .section-heading {
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 14px;
}

.profile-modal .note-title,
.bestiary-notes-grid .note-title {
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.profile-modal .note-card,
.profile-modal .profile-details,
.profile-modal .bestiary-notes-grid,
.profile-modal .compact-text-panel,
.profile-modal .text-panel {
  font-size: 16px;
  line-height: 1.55;
}

.profile-modal .text-panel {
  padding: 14px;
}

.profile-modal .modal-tags span {
  font-size: 14px;
  padding: 3px 7px;
}

.profile-modal .phase-card figcaption {
  font-size: 15px;
  margin-top: 10px;
}

.profile-modal .recipe-list li {
  font-size: 15px;
  line-height: 1.45;
  padding: 9px 11px;
}

.profile-modal .recipe-equals,
.profile-modal .recipe-plus {
  font-size: 15px;
}

.profile-modal .recipe-form,
.profile-modal .recipe-cost-inline {
  font-size: 14px;
}

@media (max-width: 560px) {
  .profile-modal .modal-content {
    font-size: 15px;
  }
  .profile-modal .section-heading {
    font-size: 20px;
  }
  .profile-modal .note-title,
  .bestiary-notes-grid .note-title {
    font-size: 15px;
  }
  .profile-modal .note-card,
  .profile-modal .profile-details,
  .profile-modal .bestiary-notes-grid,
  .profile-modal .compact-text-panel,
  .profile-modal .text-panel,
  .profile-modal .recipe-list li {
    font-size: 15px;
  }
}