@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

/* Pet Universe Values v37 — game-style rarity font + wider centered modal */

:root{
  --rarity-font:'Lilita One','Arial Rounded MT Bold','Trebuchet MS','Segoe UI',system-ui,sans-serif;
}

/* ---------- exact rarity text treatment based on user refs ---------- */
.value-card[data-rarity='exclusive'] .rarity-text,
.value-card[data-rarity='mythical'] .rarity-text,
.value-card[data-rarity='secret'] .rarity-text,
.detail-modal[data-rarity='exclusive'] .rarity-text,
.detail-modal[data-rarity='mythical'] .rarity-text,
.detail-modal[data-rarity='secret'] .rarity-text,
.rarity-section[data-rarity='exclusive'] .rarity-section-head h2,
.rarity-section[data-rarity='mythical'] .rarity-section-head h2,
.rarity-section[data-rarity='secret'] .rarity-section-head h2{
  font-family:var(--rarity-font)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  line-height:1!important;
  -webkit-text-stroke:2.2px #19171d;
  paint-order:stroke fill;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 3px 0 rgba(0,0,0,.56),
    0 6px 12px rgba(0,0,0,.22)!important;
  filter:none!important;
}

.value-card[data-rarity='secret'] .rarity-text,
.detail-modal[data-rarity='secret'] .rarity-text,
.rarity-section[data-rarity='secret'] .rarity-section-head h2{
  -webkit-text-stroke:2.2px #2a2a2d;
  text-shadow:
    0 1px 0 rgba(255,255,255,.26),
    0 2px 0 rgba(0,0,0,.55),
    0 5px 10px rgba(0,0,0,.18)!important;
}

/* keep the same exact HEX gradients, but render them as game-like lettering */
.value-card[data-rarity='exclusive'] .rarity-text,
.detail-modal[data-rarity='exclusive'] .rarity-text,
.rarity-section[data-rarity='exclusive'] .rarity-section-head h2{
  background:linear-gradient(180deg,#feddff 0%,#de22ff 18%,#930fff 44%,#9823ff 68%,#edc2ff 84%,#930fff 100%)!important;
  background-size:100% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

.value-card[data-rarity='mythical'] .rarity-text,
.detail-modal[data-rarity='mythical'] .rarity-text,
.rarity-section[data-rarity='mythical'] .rarity-section-head h2{
  background:linear-gradient(180deg,#ff00ae 0%,#ff0097 10%,#ff0f3b 28%,#ff8e0c 54%,#ffce78 72%,#fafbdd 86%,#fff582 100%)!important;
  background-size:100% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

.value-card[data-rarity='secret'] .rarity-text,
.detail-modal[data-rarity='secret'] .rarity-text,
.rarity-section[data-rarity='secret'] .rarity-section-head h2{
  background:linear-gradient(180deg,#ffffff 0%,#f1f1f1 14%,#c1c1c1 33%,#747474 60%,#ffffff 78%,#a7a7a7 100%)!important;
  background-size:100% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

/* stronger but still clean rarity pills */
.value-card[data-rarity='exclusive'] .rarity-badge,
.value-card[data-rarity='mythical'] .rarity-badge,
.value-card[data-rarity='secret'] .rarity-badge,
.detail-modal[data-rarity='exclusive'] .modal-rarity,
.detail-modal[data-rarity='mythical'] .modal-rarity,
.detail-modal[data-rarity='secret'] .modal-rarity{
  background:rgba(8,7,11,.74)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.30)!important;
}

.value-card .rarity-badge .rarity-text{font-size:1rem!important}
.detail-modal .modal-rarity .rarity-text{font-size:1.06rem!important}
.detail-modal .modal-rarity{padding:9px 14px!important}
.detail-modal .modal-best{padding:9px 14px!important}

/* ---------- wider modal + centered artwork ---------- */
.detail-modal{
  width:min(1460px,calc(100vw - 26px))!important;
  max-width:1460px!important;
}

.modal-grid{
  grid-template-columns:minmax(600px,51%) minmax(0,49%)!important;
}

.modal-visual{
  min-height:700px!important;
  padding:74px 28px 34px!important;
  display:grid!important;
  place-items:center!important;
}

.modal-art-shell{
  width:min(92%,560px)!important;
  margin-inline:auto!important;
  justify-self:center!important;
  align-self:center!important;
}

.modal-image,
.animated-pop-modal,
.modal-animated-art{
  width:min(100%,500px)!important;
  height:500px!important;
  margin-inline:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
}

.modal-animated-art .pop-frame{
  width:min(100%,492px)!important;
  height:492px!important;
}

.modal-art-ring{
  inset:8%!important;
}

.modal-badges-left{
  top:18px!important;
  left:18px!important;
}

.modal-info{
  padding:34px 34px 30px!important;
}

.history-chart-shell{min-height:318px!important}

@media (max-width: 1350px){
  .detail-modal{width:min(1340px,calc(100vw - 22px))!important}
  .modal-grid{grid-template-columns:minmax(530px,48%) minmax(0,1fr)!important}
  .modal-image,.animated-pop-modal,.modal-animated-art{width:min(100%,460px)!important;height:460px!important}
}

@media (max-width: 980px){
  .detail-modal{width:min(100vw - 16px, 980px)!important}
  .modal-grid{grid-template-columns:1fr!important}
  .modal-visual{min-height:500px!important;padding:72px 20px 24px!important}
  .modal-art-shell{width:min(94%,420px)!important}
  .modal-image,.animated-pop-modal,.modal-animated-art{width:min(100%,380px)!important;height:380px!important}
  .modal-animated-art .pop-frame{width:min(100%,372px)!important;height:372px!important}
}