/* Live Hatches — compact dashboard layout */

.pet-hatches-page .app-shell{
  display:block;
  max-width:1480px;
  margin:auto
}
.pet-hatches-page #app-main{min-width:0}
.pet-hatches-page .view-tab{text-decoration:none;text-align:center}
.pet-hatches-page .view-tabs{flex-wrap:wrap}

/* Filters */
.hatch-filters{
  display:grid;
  grid-template-columns:repeat(6,minmax(130px,1fr));
  gap:12px;
  align-items:end;
  margin-bottom:14px
}
.hatch-filters label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#9eabc0;
  font-size:.78rem;
  font-weight:600
}
.hatch-filters input,
.hatch-filters select,
.hatch-filters textarea,
.hatch-filters button,
.hatch-pagination button,
.hatch-saved input,
.hatch-saved button{
  box-sizing:border-box;
  background:#101a2b;
  color:#edf2ff;
  border:1px solid #2b3950;
  border-radius:8px;
  padding:9px 10px;
  max-width:100%;
  font:inherit
}
.hatch-filters textarea{
  resize:vertical;
  min-width:0;
  min-height:64px
}
.hatch-filters select[multiple]{
  min-width:0;
  height:82px
}
.hatch-filters button,
.hatch-pagination button,
.hatch-saved button{cursor:pointer}
.hatch-filters button[type="submit"]{
  border-color:#7c5cff;
  background:#332667;
  font-weight:700
}
.hatch-filters .hatch-live{
  flex-direction:row;
  align-items:center;
  align-self:center;
  padding:8px 0;
  font-weight:500
}
.hatch-filters .hatch-live input{width:auto}

#hatch-active{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin:2px 0 8px;
  padding:4px 10px;
  border:1px solid #2d3a51;
  border-radius:999px;
  color:#c7d1e3;
  background:#101827;
  font-size:.78rem;
  font-weight:700
}

/* Saved filters */
.hatch-saved{
  margin:10px 0 16px;
  padding:0;
  border:1px solid #29364b;
  border-radius:10px;
  background:#0d1523
}
.hatch-saved summary{
  cursor:pointer;
  padding:11px 14px;
  font-weight:700;
  font-size:.88rem
}
.hatch-saved[open] summary{
  border-bottom:1px solid #263349
}
.hatch-saved form:not([hidden]),
.hatch-saved-row{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:8px;
  margin:10px 14px
}
.hatch-saved-row button:first-child{
  flex:1;
  text-align:left;
  overflow-wrap:anywhere
}
.hatch-saved button[aria-pressed=true]{
  border-color:#9d82ff;
  background:#302246
}
.hatch-saved p{
  margin:10px 14px;
  color:#8f9db3;
  font-size:.78rem
}

/* Hatch grid */
.hatch-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}
.hatch-card{
  min-width:0;
  border:1px solid #26344a;
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(31,45,69,.42),rgba(11,18,31,.12)),
    #0c1422;
  padding:15px;
  box-shadow:0 5px 18px rgba(0,0,0,.12)
}
.hatch-card:hover{
  border-color:#3a4d69;
  transform:translateY(-1px)
}

/* Card header */
.hatch-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start
}
.hatch-title{min-width:0}
.hatch-title h2{
  margin:0 0 8px;
  color:#f4f7ff;
  font-size:1rem;
  line-height:1.2;
  font-weight:750;
  overflow-wrap:anywhere
}
.hatch-card-top time{
  flex:0 0 auto;
  color:#73839c;
  font-size:.7rem;
  white-space:nowrap
}

/* Badges */
.hatch-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px
}
.hatch-badge{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:3px 7px;
  border:1px solid #34445d;
  border-radius:999px;
  background:#131f31;
  color:#b8c5d8;
  font-size:.64rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.hatch-rarity{
  border-color:#7158a8;
  background:#261d3c;
  color:#cdb9ff
}
.hatch-egg{
  border-color:#35516a;
  background:#122331;
  color:#9fc5e4
}

/* Player */
.hatch-player{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin:14px 0 12px
}
.hatch-player strong{
  color:#e7edf8;
  font-size:.88rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.hatch-player span{
  flex:0 0 auto;
  padding:2px 6px;
  border-radius:5px;
  background:#1b2639;
  color:#9eabc0;
  font-size:.65rem;
  font-weight:800
}

/* Chance */
.hatch-chances{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px
}
.hatch-chances>div{
  min-width:0;
  padding:9px 10px;
  border:1px solid #26354b;
  border-radius:9px;
  background:#0a1220
}
.hatch-chances span{
  display:block;
  margin-bottom:3px;
  color:#74849d;
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.035em
}
.hatch-chances strong{
  display:block;
  color:#f0f4fc;
  font-size:.92rem;
  line-height:1.2;
  white-space:nowrap
}
.hatch-chances small{
  display:block;
  margin-top:3px;
  color:#8797ae;
  font-size:.66rem
}

/* Secondary stats */
.hatch-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-top:10px;
  border-top:1px solid #202d40;
  color:#74849a;
  font-size:.7rem
}
.hatch-meta strong{
  margin-left:3px;
  color:#bac5d5;
  font-weight:700
}

.hatch-pagination{
  display:flex;
  gap:10px;
  margin-top:18px
}
.hatch-pagination button:disabled{opacity:.4}
.pet-hatches-page #hatch-error{color:#ffb1b1}

.hatch-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.hatch-saved button:focus-visible,
.hatch-saved input:focus-visible,
.hatch-filters :focus-visible{
  outline:2px solid #a58cff;
  outline-offset:2px
}

@media(max-width:1180px){
  .hatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hatch-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
  .hatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hatch-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .hatch-grid{grid-template-columns:1fr}
  .hatch-filters{grid-template-columns:1fr}
  .hatch-filters label{width:100%}
  .hatch-filters .hatch-live{width:auto}
}

/* Compact filter toolbar */
.hatch-panel{
  padding:14px
}

.hatch-panel .hatch-filters{
  display:grid;
  grid-template-columns:
    minmax(135px,.85fr)
    minmax(120px,.75fr)
    minmax(150px,1fr)
    minmax(150px,1fr)
    minmax(125px,.75fr)
    minmax(125px,.75fr)
    auto;
  gap:9px;
  align-items:end;
  margin:0
}

.hatch-panel .hatch-filters label{
  min-width:0;
  gap:5px
}

.hatch-panel .hatch-filters label > span{
  color:#8998ae;
  font-size:.7rem;
  font-weight:700
}

.hatch-panel .hatch-filters input,
.hatch-panel .hatch-filters textarea,
.hatch-panel .hatch-filters select{
  width:100%;
  height:38px;
  min-height:38px;
  padding:8px 10px;
}

.hatch-panel .hatch-filters textarea{
  resize:none;
  overflow:hidden
}

.hatch-panel .hatch-filters select[multiple]{
  height:38px;
  min-height:38px
}

.hatch-filter-actions{
  display:flex;
  gap:6px
}

.hatch-filter-actions button{
  height:38px;
  padding:8px 14px;
  white-space:nowrap
}

.hatch-panel .hatch-live{
  grid-column:1 / -1;
  justify-self:start;
  width:auto;
  margin-top:-1px;
  padding:0;
  gap:6px
}

.hatch-panel .hatch-live input{
  width:auto;
  height:auto;
  min-height:0;
  margin:0
}

/* Small utility row below filters */
.hatch-filter-footer{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid #202d40
}

.hatch-filter-footer #hatch-active{
  margin:0;
  min-height:0
}

.hatch-filter-footer .hatch-saved{
  position:relative;
  margin:0;
  border:0;
  background:transparent
}

.hatch-filter-footer .hatch-saved summary{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  box-sizing:border-box;
  padding:4px 10px;
  border:1px solid #2d3a51;
  border-radius:999px;
  background:#101827;
  color:#c7d1e3;
  font-size:.78rem;
  font-weight:700
}

.hatch-filter-footer .hatch-saved[open]{
  width:100%
}

.hatch-filter-footer .hatch-saved[open] summary{
  display:inline-flex;
  border-bottom:1px solid #2d3a51
}

.hatch-saved-content{
  margin-top:9px;
  padding:10px 12px;
  border:1px solid #29364b;
  border-radius:9px;
  background:#0d1523
}

.hatch-saved-content p{
  margin:3px 0 8px
}

.hatch-saved-content form:not([hidden]){
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:end;
  margin:0 0 8px
}

.hatch-saved-content label{
  display:flex;
  flex-direction:column;
  gap:4px
}

.hatch-shiny-note{
  margin-left:auto;
  color:#687990;
  font-size:.7rem;
  white-space:nowrap
}

.hatch-status{
  color:#9ba9bc
}

@media(max-width:1180px){
  .hatch-panel .hatch-filters{
    grid-template-columns:repeat(4,minmax(130px,1fr))
  }
}

@media(max-width:850px){
  .hatch-panel .hatch-filters{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .hatch-filter-actions{
    grid-column:1 / -1
  }
}

@media(max-width:600px){
  .hatch-panel .hatch-filters{
    grid-template-columns:1fr
  }

  .hatch-filter-actions{
    grid-column:auto
  }

  .hatch-filter-footer{
    flex-wrap:wrap
  }

  .hatch-shiny-note{
    width:100%;
    margin-left:0
  }
}

/* Pet thumbnail */
.hatch-card {
  position: relative;
  padding-left: 92px;
  min-height: 154px;
}

.hatch-pet-image {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.hatch-pet-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 700px) {
  .hatch-card {
    padding-left: 84px;
  }

  .hatch-pet-image {
    left: 12px;
    top: 12px;
    width: 58px;
    height: 58px;
  }
}

/* =========================================================
   Live Hatches card v2
   ========================================================= */

.hatch-card{
  position:relative;
  padding:14px;
  min-height:0;
}

/* Player is the primary context for every hatch */
.hatch-player-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  margin-bottom:12px;
  padding-bottom:9px;
  border-bottom:1px solid #202d40;
}

.hatch-player-top strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f3f6fc;
  font-size:.9rem;
  font-weight:800;
}

.hatch-player-top time{
  flex:0 0 auto;
  color:#73839c;
  font-size:.68rem;
  white-space:nowrap;
}

/* Pet image only affects the pet header, not the entire card */
.hatch-pet-header{
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-width:0;
  margin-bottom:12px;
}

.hatch-pet-image{
  position:static;
  flex:0 0 64px;
  width:64px;
  height:64px;
  border-radius:11px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.hatch-pet-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.hatch-pet-info{
  flex:1;
  min-width:0;
}

.hatch-pet-info h2{
  margin:1px 0 7px;
  color:#f4f7ff;
  font-size:1rem;
  line-height:1.2;
  font-weight:800;
  overflow-wrap:anywhere;
}

.hatch-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.hatch-badge{
  padding:3px 7px;
  border-radius:999px;
  font-size:.63rem;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Rarity colours */
.hatch-rarity.rarity-mysterious{
  border-color:#3e76c5;
  background:#132b4c;
  color:#8fc2ff;
}

.hatch-rarity.rarity-secret{
  border-color:#a93d82;
  background:#3a1730;
  color:#ff9ed8;
}

.hatch-rarity.rarity-divine{
  border-color:#7458d5;
  background:#281d50;
  color:#c2adff;
}

.hatch-rarity.rarity-supreme{
  border-color:#b85835;
  background:#3d2018;
  color:#ffad86;
}

.hatch-rarity.rarity-ult,
.hatch-rarity.rarity-ultimate{
  border-color:#258b9d;
  background:#10333a;
  color:#7de4ef;
}

/* Variant colours */
.hatch-variant.variant-normal{
  border-color:#46546a;
  background:#182231;
  color:#bdc7d5;
}

.hatch-variant.variant-gold{
  border-color:#a47a21;
  background:#392c10;
  color:#ffd768;
}

.hatch-variant.variant-toxic{
  border-color:#39894c;
  background:#16351e;
  color:#83e99a;
}

.hatch-variant.variant-divine{
  border-color:#8056c7;
  background:#2d1d48;
  color:#d0adff;
}

.hatch-variant.variant-galaxy{
  border-color:#5864ba;
  background:#20264d;
  color:#adb7ff;
}

/* Verified Shiny only */
.hatch-shiny{
  border-color:#c7a742;
  background:linear-gradient(135deg,#493b14,#25254a);
  color:#fff0a3;
}

/* Egg is descriptive information rather than another category badge */
.hatch-egg-line{
  margin-top:7px;
  color:#8798af;
  font-size:.72rem;
}

.hatch-egg-line span{
  color:#6f819a;
  font-weight:650;
}

.hatch-egg-line strong{
  color:#b9c8dc;
  font-weight:750;
}

/* Full-width lower card content */
.hatch-chances{
  margin:0 0 11px;
}

.hatch-meta{
  width:100%;
}

/* Old elements no longer used by card v2 */
.hatch-player{
  display:none;
}

.hatch-shiny-unknown{
  display:none;
}

@media(max-width:700px){
  .hatch-card{
    padding:12px;
  }

  .hatch-pet-image{
    flex-basis:58px;
    width:58px;
    height:58px;
  }
}

/* ==========================================================
   Live Hatches filter controls v2
   ========================================================== */

.hatch-filters-v2{
  align-items:start;
}

.hatch-filter-field{
  min-width:0;
}

.hatch-filter-field > label,
.hatch-filter-field > span,
.hatch-filter-field > label:first-child{
  display:block;
}

.hatch-combo{
  position:relative;
}

.hatch-suggestions{
  position:absolute;
  z-index:100;
  top:calc(100% + 5px);
  left:0;
  right:0;
  max-height:300px;
  overflow-y:auto;
  padding:5px;
  background:#0d1725;
  border:1px solid #28384e;
  border-radius:10px;
  box-shadow:0 14px 35px rgba(0,0,0,.4);
}

.hatch-suggestion{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  text-align:left;
  color:#e8edf5;
  cursor:pointer;
}

.hatch-suggestion:hover,
.hatch-suggestion.active{
  background:#17263a;
}

.hatch-suggestion small{
  flex:0 0 auto;
  color:#8e9db1;
  font-size:11px;
}

.hatch-no-suggestions{
  margin:0;
  padding:9px;
  color:#8e9db1;
  font-size:12px;
}

.hatch-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.hatch-chip-list:not(:empty){
  margin-bottom:6px;
}

.hatch-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  min-height:25px;
  padding:3px 7px 3px 9px;
  border:1px solid #36516e;
  border-radius:999px;
  background:#15263a;
  color:#dce8f6;
  font-size:11px;
  line-height:1;
  cursor:pointer;
}

.hatch-chip b{
  font-size:15px;
  line-height:1;
  font-weight:400;
  color:#91a5bb;
}


/* Compact Rarity / Variant dropdown */

.hatch-multi{
  position:relative;
  width:100%;
}

.hatch-multi > summary{
  box-sizing:border-box;
  min-height:36px;
  display:flex;
  align-items:center;
  padding:7px 30px 7px 10px;
  border:1px solid #2b3b50;
  border-radius:8px;
  background:#101b2b;
  color:#e4ebf4;
  cursor:pointer;
  list-style:none;
  position:relative;
}

.hatch-multi > summary::-webkit-details-marker{
  display:none;
}

.hatch-multi > summary::after{
  content:'▾';
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:#91a1b5;
  font-size:11px;
}

.hatch-multi[open] > summary::after{
  transform:translateY(-50%) rotate(180deg);
}

.hatch-multi-menu{
  position:absolute;
  z-index:90;
  top:calc(100% + 5px);
  left:0;
  width:max-content;
  min-width:100%;
  box-sizing:border-box;
  padding:5px;
  border:1px solid #28384e;
  border-radius:9px;
  background:#0d1725;
  box-shadow:0 14px 35px rgba(0,0,0,.4);
}

.hatch-multi-menu label{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:4px 8px !important;
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
}

.hatch-multi-menu label:hover{
  background:#17263a;
}

.hatch-multi-menu input[type="checkbox"]{
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:0 0 14px !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #52647a !important;
  border-radius:3px !important;
  background:#111d2c !important;
  box-shadow:none !important;
  cursor:pointer;
  position:relative;
}

.hatch-multi-menu input[type="checkbox"]:checked{
  border-color:#6fa8e8 !important;
  background:#315f91 !important;
}

.hatch-multi-menu input[type="checkbox"]:checked::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
}

.hatch-multi-menu label > span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:14px !important;
  color:#c7d2e0 !important;
}


/* Rarity dropdown slightly wider for comfortable labels */

#hatch-rarity-menu .hatch-multi-menu{
  min-width:145px;
}

#hatch-variant-menu .hatch-multi-menu{
  min-width:130px;
}


/* ==========================================================
   Live Hatches filters - polished layout
   ========================================================== */

.hatch-panel{
  overflow:visible;
}

.hatch-filters-v2{
  display:grid;
  grid-template-columns:
    minmax(170px,1.15fr)
    minmax(115px,.72fr)
    minmax(170px,1.15fr)
    minmax(150px,1fr)
    minmax(120px,.72fr)
    minmax(120px,.72fr)
    minmax(105px,.62fr)
    auto;
  gap:10px;
  align-items:end;
  padding:0;
}

.hatch-filter-field,
.hatch-filter-player,
.hatch-filter-clan{
  min-width:0;
}

.hatch-filter-field > label:first-child,
.hatch-filter-field > span:first-child,
.hatch-filter-clan > span:first-child{
  display:block;
  margin:0 0 5px;
  color:#8999ad;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;
}


/* ----------------------------------------------------------
   Common control sizing
   ---------------------------------------------------------- */

.hatch-combo > input,
.hatch-filter-clan > input,
#hatch-shiny,
.hatch-multi > summary{
  box-sizing:border-box;
  width:100%;
  height:36px;
  min-height:36px;
  margin:0;
  border:1px solid #293a50;
  border-radius:8px;
  background:#101a29;
  color:#e7edf5;
  font-size:12px;
  line-height:1;
  box-shadow:none;
}

.hatch-combo > input,
.hatch-filter-clan > input{
  padding:0 10px;
}

.hatch-combo > input{
  padding-left:30px;
}

.hatch-combo::before{
  content:'⌕';
  position:absolute;
  z-index:2;
  left:10px;
  bottom:10px;
  pointer-events:none;
  color:#70839a;
  font-size:15px;
  line-height:1;
}

.hatch-combo:has(.hatch-chip-list:not(:empty))::before{
  bottom:10px;
}

.hatch-combo > input::placeholder,
.hatch-filter-clan > input::placeholder{
  color:#63758b;
}

.hatch-combo > input:focus,
.hatch-filter-clan > input:focus,
#hatch-shiny:focus,
.hatch-multi[open] > summary{
  outline:none;
  border-color:#466c99;
  box-shadow:0 0 0 2px rgba(70,108,153,.12);
}


/* ----------------------------------------------------------
   Selected chips
   ---------------------------------------------------------- */

.hatch-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.hatch-chip-list:not(:empty){
  margin:0 0 5px;
}

.hatch-chip{
  width:auto !important;
  min-width:0 !important;
  min-height:23px !important;
  height:23px;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  margin:0 !important;
  padding:0 6px 0 8px !important;
  border:1px solid #304c6b !important;
  border-radius:999px !important;
  background:#14263a !important;
  color:#cfe0f2 !important;
  font-size:10px !important;
  font-weight:600;
  line-height:1 !important;
  box-shadow:none !important;
}

.hatch-chip:hover{
  border-color:#486d96 !important;
  background:#192e46 !important;
}

.hatch-chip b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin:0;
  color:#7f94aa;
  font-size:14px;
  font-weight:400;
  line-height:1;
}

.hatch-chip:hover b{
  color:#d9e5f1;
}


/* ----------------------------------------------------------
   Autocomplete results
   ---------------------------------------------------------- */

.hatch-suggestions{
  top:calc(100% + 5px);
  max-height:280px;
  padding:4px;
  border:1px solid #293b52;
  border-radius:8px;
  background:#0c1623;
  box-shadow:0 14px 35px rgba(0,0,0,.48);
}

.hatch-suggestion{
  min-height:32px;
  padding:5px 8px;
  border-radius:6px;
  font-size:11px;
}

.hatch-suggestion:hover,
.hatch-suggestion.active{
  background:#17283c;
}

.hatch-suggestion small{
  color:#72859b;
  font-size:9px;
}


/* ----------------------------------------------------------
   Rarity / Variant
   ---------------------------------------------------------- */

.hatch-multi > summary{
  display:flex;
  align-items:center;
  padding:0 28px 0 10px;
}

.hatch-multi > summary::after{
  right:9px;
}

.hatch-multi-menu{
  top:calc(100% + 5px);
  min-width:135px !important;
  padding:4px;
  border:1px solid #293b52;
  border-radius:8px;
  background:#0c1623;
  box-shadow:0 14px 35px rgba(0,0,0,.48);
}

#hatch-rarity-menu .hatch-multi-menu{
  min-width:140px !important;
}

.hatch-multi-menu label{
  box-sizing:border-box;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  width:100%;
  min-height:27px !important;
  margin:0 !important;
  padding:3px 6px !important;
  border-radius:5px;
}

.hatch-multi-menu input[type="checkbox"]{
  flex:0 0 13px !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  min-height:13px !important;
  max-width:13px !important;
  max-height:13px !important;
}

.hatch-multi-menu label > span{
  margin:0 !important;
  font-size:11px !important;
  line-height:13px !important;
}


/* ----------------------------------------------------------
   Shiny select
   ---------------------------------------------------------- */

#hatch-shiny{
  appearance:none;
  -webkit-appearance:none;
  padding:0 28px 0 10px;
  cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,#8090a4 50%),
    linear-gradient(135deg,#8090a4 50%,transparent 50%);
  background-position:
    calc(100% - 13px) 15px,
    calc(100% - 9px) 15px;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
}


/* ----------------------------------------------------------
   Apply / Clear
   ---------------------------------------------------------- */

.hatch-filter-actions{
  display:flex;
  align-items:center;
  gap:5px;
  height:36px;
}

.hatch-filter-actions button{
  width:auto;
  min-width:58px;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0 11px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
}

.hatch-filter-actions button[type="submit"]{
  border:1px solid #4b79ad;
  background:#315f91;
  color:#fff;
}

.hatch-filter-actions button[type="submit"]:hover{
  background:#396da3;
}

.hatch-filter-actions button[type="reset"]{
  border:1px solid #2b3c51;
  background:#111d2c;
  color:#a9b7c7;
}


/* ----------------------------------------------------------
   Bottom row
   ---------------------------------------------------------- */

.hatch-live{
  grid-column:1 / -1;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:6px;
  width:max-content;
  margin:1px 0 0 !important;
  color:#7f90a4;
  font-size:10px;
}

.hatch-live input[type="checkbox"]{
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  margin:0 !important;
}

.hatch-filter-footer{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.055);
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media(max-width:1200px){
  .hatch-filters-v2{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .hatch-filter-actions{
    align-self:end;
  }
}

@media(max-width:760px){
  .hatch-filters-v2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:480px){
  .hatch-filters-v2{
    grid-template-columns:1fr;
  }

  .hatch-filter-actions{
    width:100%;
  }

  .hatch-filter-actions button{
    flex:1;
  }
}


/* ==========================================================
   Live Hatches filters - final compact layout
   ========================================================== */

/* Keep every primary filter + actions on one row */
.hatch-filters-v2{
  grid-template-columns:
    minmax(155px,1.15fr)
    minmax(105px,.75fr)
    minmax(155px,1.15fr)
    minmax(145px,1fr)
    minmax(115px,.72fr)
    minmax(115px,.72fr)
    minmax(85px,.58fr)
    auto !important;
  gap:8px !important;
  align-items:end;
}

/* Remove search glyph - placeholders are clearer without it */
.hatch-combo::before{
  display:none !important;
}

.hatch-combo > input{
  padding-left:10px !important;
}

/* Actions stay alongside Shiny */
.hatch-filter-actions{
  grid-column:auto !important;
  display:flex !important;
  align-items:center;
  align-self:end;
  gap:5px;
  width:auto;
  height:36px;
  margin:0 !important;
}

.hatch-filter-actions button{
  flex:none !important;
}

.hatch-filter-actions button[type="submit"]{
  min-width:54px;
}

.hatch-filter-actions button[type="reset"]{
  min-width:50px;
}


/* Bottom row: saved filters left, auto-refresh right */
.hatch-filter-footer{
  position:relative;
  display:flex;
  align-items:center;
  min-height:30px;
  margin-top:9px !important;
  padding-top:8px !important;
  padding-right:115px;
  border-top:1px solid rgba(255,255,255,.055);
}

/* Auto-refresh currently lives in the grid.
   Visually move it into the footer line. */
.hatch-live{
  position:absolute !important;
  right:12px;
  bottom:9px;
  z-index:2;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:5px !important;
  width:auto !important;
  margin:0 !important;
  color:#7f90a4;
  font-size:10px;
  white-space:nowrap;
}

.hatch-live input[type="checkbox"]{
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  min-height:12px !important;
  margin:0 !important;
}


/* Slightly tighter filter panel */
.hatch-panel{
  padding-top:12px;
  padding-bottom:10px;
}


/* Preserve practical responsive layouts */
@media(max-width:1200px){
  .hatch-filters-v2{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .hatch-filter-actions{
    grid-column:auto !important;
  }

  .hatch-live{
    position:static !important;
    grid-column:1 / -1 !important;
    margin-top:2px !important;
  }

  .hatch-filter-footer{
    padding-right:0;
  }
}

@media(max-width:760px){
  .hatch-filters-v2{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:480px){
  .hatch-filters-v2{
    grid-template-columns:1fr !important;
  }

  .hatch-filter-actions{
    width:100%;
  }

  .hatch-filter-actions button{
    flex:1 !important;
  }
}


/* Auto-refresh: keep directly below filters, aligned right */
.hatch-filters-v2{
  position:relative;
  padding-bottom:38px !important;
}

.hatch-live{
  position:absolute !important;
  right:0 !important;
  bottom:8px !important;
  top:auto !important;
  left:auto !important;
}

.hatch-filter-footer{
  position:absolute !important;
  left:0 !important;
  right:115px !important;
  bottom:7px !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border-top:0 !important;
}

@media(max-width:1200px){
  .hatch-filter-footer{
    position:static !important;
    margin-top:8px !important;
  }

  .hatch-live{
    position:static !important;
  }

  .hatch-filters-v2{
    padding-bottom:0 !important;
  }
}


/* ==========================================================
   Live Hatches dashboard KPI row
   ========================================================== */

.hatch-dashboard{
  margin:12px 0;
}

.hatch-kpi-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(0,1.15fr)
    minmax(0,1.7fr);
  gap:10px;
}

.hatch-kpi{
  box-sizing:border-box;
  min-width:0;
  min-height:104px;
  padding:13px 15px;
  border:1px solid #26374b;
  border-radius:10px;
  background:
    linear-gradient(
      145deg,
      rgba(20,31,47,.96),
      rgba(13,23,36,.96)
    );
}

.hatch-kpi-label{
  display:block;
  margin-bottom:8px;
  color:#71849a;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hatch-kpi-value{
  display:block;
  overflow:hidden;
  color:#f0f5fa;
  font-size:25px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hatch-kpi-note{
  display:block;
  overflow:hidden;
  margin-top:7px;
  color:#788ba1;
  font-size:10px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hatch-kpi-rarest{
  position:relative;
}

.hatch-kpi-pet{
  display:block;
  overflow:hidden;
  color:#f0f5fa;
  font-size:18px;
  font-weight:800;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hatch-kpi-rarest-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  min-height:19px;
  margin-top:6px;
}

.hatch-kpi-rarest .hatch-badge{
  font-size:8px;
  padding:3px 6px;
}

@media(max-width:1000px){
  .hatch-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .hatch-kpi-grid{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   Top Rarest Hatches
   ========================================================== */

.hatch-rarest-panel{
  margin-top:10px;
  overflow:hidden;
  border:1px solid #26374b;
  border-radius:10px;
  background:
    linear-gradient(
      180deg,
      rgba(18,29,44,.96),
      rgba(12,21,33,.96)
    );
}

.hatch-rarest-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 15px 11px;
  border-bottom:1px solid #26374b;
}

.hatch-rarest-eyebrow{
  display:block;
  margin-bottom:4px;
  color:#71849a;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hatch-rarest-header h2{
  margin:0;
  color:#f0f5fa;
  font-size:17px;
  font-weight:800;
  line-height:1.1;
}

.hatch-rarest-limit{
  display:flex;
  align-items:center;
  gap:7px;
  color:#71849a;
  font-size:10px;
  font-weight:700;
}

.hatch-rarest-limit select{
  min-width:82px;
  height:30px;
  padding:0 8px;
  border:1px solid #30435b;
  border-radius:6px;
  background:#101c2b;
  color:#dbe7f2;
  font:inherit;
  cursor:pointer;
}

.hatch-rarest-table-wrap{
  overflow-x:auto;
}

.hatch-rarest-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.hatch-rarest-table th{
  padding:8px 10px;
  border-bottom:1px solid #223247;
  color:#667b92;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase;
}

.hatch-rarest-table td{
  padding:9px 10px;
  border-bottom:1px solid rgba(38,55,75,.62);
  color:#aebed0;
  font-size:11px;
  line-height:1.2;
  vertical-align:middle;
}

.hatch-rarest-table tbody tr:last-child td{
  border-bottom:0;
}

.hatch-rarest-table tbody tr:hover{
  background:rgba(74,107,143,.07);
}

.hatch-rarest-table th:nth-child(1),
.hatch-rarest-table td:nth-child(1){
  width:38px;
}

.hatch-rarest-table th:nth-child(2),
.hatch-rarest-table td:nth-child(2){
  width:21%;
}

.hatch-rarest-table th:nth-child(3),
.hatch-rarest-table td:nth-child(3){
  width:22%;
}

.hatch-rarest-table th:nth-child(4),
.hatch-rarest-table td:nth-child(4){
  width:22%;
}

.hatch-rarest-table th:nth-child(5),
.hatch-rarest-table td:nth-child(5){
  width:18%;
}

.hatch-rarest-table th:nth-child(6),
.hatch-rarest-table td:nth-child(6){
  width:82px;
}

.hatch-rarest-rank strong{
  color:#71849a;
  font-size:12px;
}

.hatch-rarest-table tbody tr:nth-child(1) .hatch-rarest-rank strong{
  color:#f3d36a;
  font-size:15px;
}

.hatch-rarest-table tbody tr:nth-child(2) .hatch-rarest-rank strong{
  color:#c1ccd8;
  font-size:14px;
}

.hatch-rarest-table tbody tr:nth-child(3) .hatch-rarest-rank strong{
  color:#c58c61;
  font-size:13px;
}

.hatch-rarest-pet strong{
  display:inline-block;
  overflow:hidden;
  max-width:100%;
  color:#eaf1f7;
  font-size:12px;
  text-overflow:ellipsis;
  vertical-align:middle;
  white-space:nowrap;
}

.hatch-rarest-pet .hatch-shiny{
  margin-left:5px;
}

.hatch-rarest-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}

.hatch-rarest-badges .hatch-badge,
.hatch-rarest-pet .hatch-badge{
  padding:3px 6px;
  font-size:8px;
}

.hatch-rarest-player{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hatch-rarest-chance strong{
  display:block;
  color:#f0f5fa;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.hatch-rarest-chance small{
  display:block;
  margin-top:2px;
  color:#687d94;
  font-size:8px;
  white-space:nowrap;
}

.hatch-rarest-time{
  color:#71849a !important;
  white-space:nowrap;
}

.hatch-rarest-empty{
  padding:24px !important;
  color:#71849a !important;
  text-align:center;
}

@media(max-width:760px){
  .hatch-rarest-table{
    min-width:720px;
  }

  .hatch-rarest-header{
    padding:12px;
  }
}


/* Final filter footer layout */
.hatch-filter-footer{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  margin-top:9px !important;
  padding:8px 0 0 !important;
  border-top:1px solid rgba(255,255,255,.055);
}

.hatch-filter-footer-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.hatch-filter-footer #hatch-active{
  margin:0;
}

.hatch-filter-footer .hatch-saved{
  width:auto;
  flex:none;
}

.hatch-filter-footer .hatch-live{
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  flex:none;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:5px !important;
  width:auto !important;
  margin:0 !important;
}

@media(max-width:600px){
  .hatch-filter-footer{
    align-items:flex-start;
  }

  .hatch-filter-footer-left{
    flex-wrap:wrap;
  }
}


/* Definitive filter footer positioning fix */
.hatch-filter-footer{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  box-sizing:border-box;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px !important;
  margin:9px 0 0 !important;
  padding:8px 0 0 !important;
  border-top:1px solid rgba(255,255,255,.055) !important;
}

.hatch-filter-footer-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.hatch-filter-footer .hatch-live{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin:0 !important;
}


/* ============================================================
   Hatch Distribution
   ============================================================ */

.hatch-distribution-panel{
  margin-top:18px;
  padding:18px 20px 20px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.hatch-distribution-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:18px;
}

.hatch-distribution-eyebrow{
  display:block;
  margin-bottom:3px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

.hatch-distribution-header h2{
  margin:0;
  font-size:17px;
  line-height:1.2;
  font-weight:700;
  color:#fff;
}

#hatch-distribution-results{
  display:grid;
  gap:18px;
}

.hatch-distribution-group{
  min-width:0;
}

.hatch-distribution-group + .hatch-distribution-group{
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.055);
}

.hatch-distribution-group-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.hatch-distribution-group-header > strong{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hatch-distribution-group-total{
  display:flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
  font-size:12px;
}

.hatch-distribution-group-total b{
  color:rgba(255,255,255,.92);
  font-size:13px;
}

.hatch-distribution-group-total span{
  color:rgba(255,255,255,.43);
}

.hatch-distribution-variants{
  display:grid;
  gap:7px;
}

.hatch-distribution-row{
  display:grid;
  grid-template-columns:72px minmax(100px,1fr) 108px;
  align-items:center;
  gap:12px;
  min-width:0;
}

.hatch-distribution-variant{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.70);
}

.hatch-distribution-bar-track{
  position:relative;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}

.hatch-distribution-bar{
  height:100%;
  min-width:2px;
  border-radius:inherit;
  background:rgba(255,255,255,.45);
}

.hatch-distribution-value{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:5px;
  white-space:nowrap;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.hatch-distribution-value b{
  min-width:28px;
  text-align:right;
  font-size:12px;
  color:rgba(255,255,255,.92);
}

.hatch-distribution-value span{
  min-width:53px;
  text-align:right;
  color:rgba(255,255,255,.43);
}


/* Rarity accents */

.hatch-distribution-group.rarity-secret
.hatch-distribution-group-header > strong{
  color:#f15bc8;
}

.hatch-distribution-group.rarity-divine
.hatch-distribution-group-header > strong{
  color:#9c7cff;
}

.hatch-distribution-group.rarity-mysterious
.hatch-distribution-group-header > strong{
  color:#62a8ff;
}

.hatch-distribution-group.rarity-supreme
.hatch-distribution-group-header > strong{
  color:#ff765f;
}

.hatch-distribution-group.rarity-ultimate
.hatch-distribution-group-header > strong,
.hatch-distribution-group.rarity-ult
.hatch-distribution-group-header > strong{
  color:#4edfd5;
}


/* Variant bars */

.hatch-distribution-bar.variant-normal{
  background:rgba(255,255,255,.42);
}

.hatch-distribution-bar.variant-gold{
  background:#d9b84b;
}

.hatch-distribution-bar.variant-toxic{
  background:#52c978;
}

.hatch-distribution-bar.variant-divine{
  background:#9c7cff;
}

.hatch-distribution-bar.variant-galaxy{
  background:#6da9ff;
}


/* Empty state */

.hatch-distribution-empty{
  padding:12px 0;
  font-size:12px;
  color:rgba(255,255,255,.42);
}


/* Responsive */

@media (max-width:700px){
  .hatch-distribution-panel{
    padding:16px;
  }

  .hatch-distribution-row{
    grid-template-columns:60px minmax(70px,1fr) 96px;
    gap:8px;
  }

  .hatch-distribution-value{
    gap:3px;
  }
}


/* ============================================================
   Desktop Live Hatches + Dashboard layout
   ============================================================ */

@media (min-width:1101px){

  /*
   * Use substantially more of the available desktop width.
   */
  .hatch-page{
    width:min(1680px,calc(100vw - 48px)) !important;
    max-width:none !important;
  }

  .hatch-main-layout{
    display:grid;
    grid-template-columns:minmax(0,68fr) minmax(360px,32fr);
    align-items:start;
    gap:16px;
    margin-top:16px;
  }

  .hatch-live-column,
  .hatch-dashboard-column{
    min-width:0;
  }

  /*
   * Dashboard now lives in the right column, so it must not
   * retain spacing intended for the old full-width position.
   */
  .hatch-dashboard{
    margin-top:0 !important;
  }

  /*
   * Live cards get the primary share of the page.
   */
  .hatch-live-column #hatch-results{
    margin-top:0 !important;
  }

  /*
   * Keep the dashboard visible while browsing longer hatch lists.
   * It only sticks when there is enough viewport height naturally.
   */
  .hatch-dashboard-column{
    position:sticky;
    top:16px;
  }
}


/* Return to the normal stacked layout on narrower screens */

@media (max-width:1100px){

  .hatch-main-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .hatch-live-column{
    order:2;
    width:100%;
  }

  .hatch-dashboard-column{
    order:1;
    width:100%;
    position:static;
  }
}


/* ============================================================
   Sidebar refinement: 72/28 + readable dashboard typography
   ============================================================ */

@media (min-width:1101px){

  .hatch-main-layout{
    grid-template-columns:minmax(0,72fr) minmax(330px,28fr) !important;
    gap:16px;
  }

  /* KPI cards: two columns instead of four narrow cards */
  .hatch-dashboard-column .hatch-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }

  .hatch-dashboard-column .hatch-kpi{
    min-height:108px;
    padding:14px;
  }

  .hatch-dashboard-column .hatch-kpi-label{
    font-size:10px;
    line-height:1.2;
    margin-bottom:9px;
  }

  .hatch-dashboard-column .hatch-kpi-value{
    font-size:27px;
    line-height:1.1;
  }

  .hatch-dashboard-column .hatch-kpi-pet{
    font-size:17px;
    line-height:1.2;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .hatch-dashboard-column .hatch-kpi-note{
    font-size:11px;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .hatch-dashboard-column .hatch-kpi-rarest-meta{
    gap:4px;
  }

  /* Hatch Distribution: increase readability */
  .hatch-dashboard-column .hatch-distribution-panel{
    padding:18px 16px;
  }

  .hatch-dashboard-column .hatch-distribution-header h2{
    font-size:19px;
  }

  .hatch-dashboard-column .hatch-distribution-eyebrow{
    font-size:11px;
  }

  .hatch-dashboard-column .hatch-distribution-group-header > strong{
    font-size:13px;
  }

  .hatch-dashboard-column .hatch-distribution-group-total,
  .hatch-dashboard-column .hatch-distribution-group-total b{
    font-size:13px;
  }

  .hatch-dashboard-column .hatch-distribution-variants{
    gap:9px;
  }

  .hatch-dashboard-column .hatch-distribution-row{
    grid-template-columns:58px minmax(45px,1fr) 88px;
    gap:8px;
  }

  .hatch-dashboard-column .hatch-distribution-variant{
    font-size:12px;
  }

  .hatch-dashboard-column .hatch-distribution-bar-track{
    height:8px;
  }

  .hatch-dashboard-column .hatch-distribution-value{
    font-size:12px;
    gap:4px;
  }

  .hatch-dashboard-column .hatch-distribution-value b{
    min-width:24px;
    font-size:13px;
  }

  .hatch-dashboard-column .hatch-distribution-value span{
    min-width:48px;
    font-size:11px;
  }
}


/* Hatch timestamp footer */
.hatch-live-column .hatch-card{
  display:flex;
  flex-direction:column;
}

.hatch-live-column .hatch-player-top{
  min-width:0;
}

.hatch-live-column .hatch-player-top strong{
  min-width:0;
  font-size:11px !important;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.hatch-live-column .hatch-time-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:auto;
  padding-top:8px;
  color:#718198;
  font-size:10px;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}

.hatch-live-column .hatch-time-footer time{
  white-space:nowrap;
}


/* ============================================================
   Top Rarest Hatches - above Live Hatches
   ============================================================ */

@media (min-width:1101px){

  .hatch-rarest-left{
    width:100%;
    margin:0 0 14px;
  }

  .hatch-rarest-left .hatch-rarest-panel{
    width:100%;
    margin:0 !important;
  }

  .hatch-rarest-left .hatch-rarest-header{
    padding:10px 12px !important;
  }

  .hatch-rarest-left .hatch-rarest-header h2{
    font-size:15px;
    line-height:1.2;
  }

  .hatch-rarest-left .hatch-rarest-eyebrow{
    font-size:9px;
  }

  .hatch-rarest-left .hatch-rarest-table-wrap{
    width:100%;
    overflow-x:hidden !important;
  }

  .hatch-rarest-left .hatch-rarest-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }

  .hatch-rarest-left .hatch-rarest-table th,
  .hatch-rarest-left .hatch-rarest-table td{
    padding:7px 8px !important;
  }

  .hatch-rarest-left .hatch-rarest-table th:nth-child(1),
  .hatch-rarest-left .hatch-rarest-table td:nth-child(1){
    width:28px;
  }

  .hatch-rarest-left .hatch-rarest-table th:nth-child(2),
  .hatch-rarest-left .hatch-rarest-table td:nth-child(2){
    width:22%;
  }

  .hatch-rarest-left .hatch-rarest-table th:nth-child(3),
  .hatch-rarest-left .hatch-rarest-table td:nth-child(3){
    width:21%;
  }

  .hatch-rarest-left .hatch-rarest-table th:nth-child(4),
  .hatch-rarest-left .hatch-rarest-table td:nth-child(4){
    display:table-cell !important;
    width:21%;
  }

  .hatch-rarest-left .hatch-rarest-table th:nth-child(5),
  .hatch-rarest-left .hatch-rarest-table td:nth-child(5){
    width:18%;
  }

  .hatch-rarest-left .hatch-rarest-table th:nth-child(6),
  .hatch-rarest-left .hatch-rarest-table td:nth-child(6){
    display:table-cell !important;
    width:18%;
  }

  .hatch-rarest-left .hatch-rarest-pet strong{
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hatch-rarest-left .hatch-rarest-player{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hatch-rarest-left .hatch-rarest-chance strong{
    font-size:11px;
    white-space:nowrap;
  }

  .hatch-rarest-left .hatch-rarest-chance small{
    font-size:8px;
  }

  .hatch-rarest-left .hatch-rarest-time{
    white-space:nowrap;
    font-size:9px;
  }

  .hatch-rarest-left .hatch-rarest-badges{
    flex-wrap:nowrap;
  }
}


/* Align Top Rarest with dashboard KPI cards */
@media (min-width:1101px){
  .hatch-rarest-left{
    margin-top:-25px !important;
  }
}


/* Player Analysis header */
.hatch-player-analysis-header{
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.hatch-player-analysis-header[hidden]{
  display:none !important;
}

.hatch-player-analysis-header strong{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  color:#f4f7fb;
}

.hatch-player-analysis-header span{
  display:block;
  margin-top:3px;
  font-size:10px;
  line-height:1.3;
  color:#8d98a8;
}


/* Luck multiplier */
.hatch-luck{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.15;
  white-space:nowrap;
  color:#aeb8c7;
}

.hatch-luck b{
  margin-right:3px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#7f8a9a;
}


/* Luck multiplier emphasis */
.hatch-luck{
  display:flex;
  align-items:center;
  gap:4px;
  width:max-content;
  margin-top:5px;
  padding:2px 5px;
  border:1px solid rgba(126,160,210,.22);
  border-radius:5px;
  background:rgba(91,126,177,.08);
  font-size:9px;
  line-height:1.15;
  white-space:nowrap;
  color:#8794a6;
}

.hatch-luck b{
  margin:0;
  font-size:8px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8491a3;
}

.hatch-luck strong{
  font-size:10px;
  font-weight:700;
  color:#c9d5e6;
}

.hatch-luck span{
  color:#657286;
}


/* ============================================================
   Live Hatch Card v3
   Canonical card layout during redesign
   ============================================================ */

.hatch-live-column .hatch-card{
  display:flex;
  flex-direction:column;
  padding:14px;
}

/* Player row */
.hatch-live-column .hatch-player-top{
  flex:0 0 auto;
  min-height:18px;
  margin-bottom:8px;
}

/* Fixed pet/header area so all cards align */
.hatch-live-column .hatch-pet-header{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:11px;
  align-items:start;
  min-height:118px;
  margin-bottom:10px;
}

.hatch-live-column .hatch-pet-image{
  position:static;
  width:64px;
  height:64px;
  flex:none;
}

.hatch-live-column .hatch-pet-info{
  display:grid;
  grid-template-rows:38px 24px 22px;
  align-content:start;
  min-width:0;
}

/* Always reserve two lines for the pet name */
.hatch-live-column .hatch-pet-info h2{
  display:-webkit-box;
  min-height:38px;
  max-height:38px;
  margin:0;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:1rem;
  line-height:19px;
}

/* Rarity / Variant / Shiny always occupy their own row */
.hatch-live-column .hatch-badges{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  min-width:0;
  height:24px;
  overflow:visible;
}

.hatch-live-column .hatch-badge{
  flex:0 0 auto;
  padding:3px 6px;
  font-size:.59rem;
}

/* Egg always starts at the same vertical position */
.hatch-live-column .hatch-egg-line{
  align-self:start;
  margin:3px 0 0;
  font-size:.69rem;
  line-height:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Identical chance boxes */
.hatch-live-column .hatch-chances{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  margin:0;
}

.hatch-live-column .hatch-chances>div{
  display:grid;
  grid-template-rows:22px 22px 15px;
  align-content:start;
  min-width:0;
  min-height:72px;
  padding:8px 9px;
}

.hatch-live-column .hatch-chances>div>span{
  margin:0;
  align-self:start;
}

.hatch-live-column .hatch-chances>div>strong{
  align-self:center;
  margin:0;
}

.hatch-live-column .hatch-chances>div>small{
  align-self:end;
  margin:0;
}

/* Luck gets its own clean full-width row */
.hatch-live-column .hatch-luck-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:28px;
  margin-top:7px;
  padding:5px 9px;
  border:1px solid rgba(126,160,210,.18);
  border-radius:7px;
  background:rgba(91,126,177,.055);
}

.hatch-live-column .hatch-luck-row span{
  color:#7f8da1;
  font-size:9px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.hatch-live-column .hatch-luck-row strong{
  color:#d2dced;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

/* Secondary stats align across cards */
.hatch-live-column .hatch-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  width:100%;
  margin-top:9px;
  padding-top:9px;
}

.hatch-live-column .hatch-meta>span{
  min-width:0;
}

/* Timestamp remains anchored at bottom right */
.hatch-live-column .hatch-time-footer{
  margin-top:auto;
  padding-top:9px;
}

/* Old embedded Luck element is no longer part of card v3 */
.hatch-live-column .hatch-luck{
  display:none !important;
}

@media(max-width:700px){
  .hatch-live-column .hatch-pet-header{
    grid-template-columns:58px minmax(0,1fr);
  }

  .hatch-live-column .hatch-pet-image{
    width:58px;
    height:58px;
  }
}


/* Card v3 - Shiny gets a stable second badge line */
.hatch-live-column .hatch-pet-info{
  grid-template-rows:38px 40px 22px;
}

.hatch-live-column .hatch-pet-header{
  min-height:134px;
}

.hatch-live-column .hatch-badges{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  align-items:flex-start;
  gap:4px;
  height:40px;
  overflow:hidden;
}

.hatch-live-column .hatch-badges .hatch-shiny{
  flex-basis:max-content;
}

/* Force Shiny onto its own line without moving rarity/variant */
.hatch-live-column .hatch-badges .hatch-shiny::before{
  content:'';
}

.hatch-live-column .hatch-badges .hatch-shiny{
  margin-right:100%;
}

.hatch-live-column .hatch-egg-line{
  margin-top:3px;
}


/* Card v3 - final pet header spacing */
.hatch-live-column .hatch-pet-info{
  grid-template-rows:42px 40px 22px;
}

.hatch-live-column .hatch-egg-line{
  margin-top:8px;
}


/* Card v3 - more space before Egg */
.hatch-live-column .hatch-egg-line{
  margin-top:15px;
}


/* Card v3 - stronger separation before Egg */
.hatch-live-column .hatch-egg-line{
  margin-top:25px;
}


/* Card v3 - natural content flow inside fixed-height pet header */
.hatch-live-column .hatch-pet-header{
  min-height:134px;
  height:134px;
}

.hatch-live-column .hatch-pet-info{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.hatch-live-column .hatch-pet-info h2{
  min-height:0;
  max-height:38px;
  margin:0 0 9px;
}

.hatch-live-column .hatch-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  align-content:flex-start;
  gap:4px;
  width:100%;
  height:auto;
  min-height:18px;
  overflow:visible;
}

/* Shiny starts a second badge row */
.hatch-live-column .hatch-badges .hatch-shiny{
  margin-right:100%;
}

.hatch-live-column .hatch-egg-line{
  margin:10px 0 0;
  line-height:18px;
}


/* Card v3 - final Egg spacing */
.hatch-live-column .hatch-egg-line{
  margin-top:14px;
}


/* Top Rarest - Luck Multiplier */
.hatch-rarest-left .hatch-rarest-luck{
  width:8%;
  white-space:nowrap;
  text-align:right;
}

.hatch-rarest-left td.hatch-rarest-luck strong{
  color:#d2dced;
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}


/* Player Analysis - Luckiest Hatch */
.hatch-luckiest-panel{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid #2c3a4d;
  border-radius:11px;
  background:#111a27;
}

.hatch-luckiest-panel[hidden]{
  display:none !important;
}

.hatch-luckiest-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.hatch-luckiest-heading>span{
  color:#8190a6;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hatch-luckiest-heading>strong{
  color:#f4f7fb;
  font-size:20px;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.hatch-luckiest-main{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.hatch-luckiest-pet{
  display:block;
  margin-bottom:6px;
  color:#f4f7fb;
  font-size:16px;
  line-height:1.15;
  font-weight:900;
}

.hatch-luckiest-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  min-height:18px;
}

.hatch-luckiest-label{
  color:#8190a6;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.hatch-luckiest-chances{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid #253247;
}

.hatch-luckiest-chances>div{
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
}

.hatch-luckiest-chances>div:last-child{
  justify-content:flex-end;
}

.hatch-luckiest-chances span{
  color:#8190a6;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.hatch-luckiest-chances strong{
  color:#e8edf5;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.hatch-luckiest-arrow{
  color:#66758b !important;
  font-size:14px !important;
}


/* Keep chance labels visually consistent across hatch cards */
.hatch-live-column .hatch-chances > div > span:first-child{
  display:block;
  width:100%;
  max-width:52px;
  line-height:11px;
}

.hatch-live-column .hatch-chances > div:first-child > span:first-child{
  max-width:34px;
}


/* =========================================================
   Top Hatchers
   ========================================================= */

.hatch-top-hatchers-panel{
  margin:12px 0 16px;
  border:1px solid #2c3a4d;
  border-radius:11px;
  overflow:hidden;
  background:#111a27;
}

.hatch-top-hatchers-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  border-bottom:1px solid #253247;
}

.hatch-top-hatchers-eyebrow{
  display:block;
  margin-bottom:2px;
  color:#8190a6;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hatch-top-hatchers-header h2{
  margin:0;
  color:#f4f7fb;
  font-size:14px;
  line-height:1.1;
  font-weight:900;
}

.hatch-top-hatchers-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.hatch-top-hatchers-tabs button{
  appearance:none;
  border:1px solid #34445a;
  border-radius:6px;
  padding:4px 8px;
  background:#172233;
  color:#9ba8ba;
  font:inherit;
  font-size:10px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.hatch-top-hatchers-tabs button:hover{
  border-color:#52647d;
  color:#eef3fa;
}

.hatch-top-hatchers-tabs button.active{
  border-color:#7954c8;
  background:#34245b;
  color:#f3edff;
}

.hatch-top-hatchers-table-wrap{
  width:100%;
  overflow-x:auto;
}

.hatch-top-hatchers-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.hatch-top-hatchers-table th{
  padding:6px 10px;
  border-bottom:1px solid #253247;
  color:#74839a;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase;
}

.hatch-top-hatchers-table td{
  height:36px;
  padding:5px 10px;
  border-bottom:1px solid #202d40;
  color:#c9d2df;
  font-size:11px;
  vertical-align:middle;
}

.hatch-top-hatchers-table tbody tr:last-child td{
  border-bottom:0;
}

.hatch-top-hatchers-table tbody tr:hover{
  background:#152031;
}

.hatch-top-hatchers-rank{
  width:42px;
  text-align:center !important;
  font-variant-numeric:tabular-nums;
}

.hatch-top-hatchers-table td.hatch-top-hatchers-rank{
  color:#8d9bb0;
  font-size:12px;
  font-weight:900;
}

.hatch-top-hatchers-table tbody tr:nth-child(1) td.hatch-top-hatchers-rank{
  color:#f1c75b;
}

.hatch-top-hatchers-table tbody tr:nth-child(2) td.hatch-top-hatchers-rank{
  color:#c4ccd7;
}

.hatch-top-hatchers-table tbody tr:nth-child(3) td.hatch-top-hatchers-rank{
  color:#c58b5c;
}

.hatch-top-hatchers-player{
  width:auto;
}

.hatch-top-hatchers-player strong{
  display:block;
  overflow:hidden;
  color:#edf2f8;
  font-size:11px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hatch-top-hatchers-player span{
  display:block;
  margin-top:1px;
  overflow:hidden;
  color:#77869c;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hatch-top-hatchers-clan{
  width:90px;
  text-align:center !important;
}

.hatch-top-hatchers-clan-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  padding:3px 6px;
  border:1px solid #384a62;
  border-radius:5px;
  background:#182436;
  color:#b7c3d3;
  font-size:9px;
  font-weight:800;
}

.hatch-top-hatchers-count{
  width:90px;
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}

.hatch-top-hatchers-count strong{
  color:#f4f7fb;
  font-size:12px;
  font-weight:900;
}

.hatch-top-hatchers-empty{
  height:52px !important;
  color:#77869c !important;
  text-align:center !important;
  font-size:10px !important;
}

@media (max-width:900px){
  .hatch-top-hatchers-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .hatch-top-hatchers-tabs{
    justify-content:flex-start;
  }
}


/* Top Hatchers: fixed viewport with internal scrolling */
.hatch-top-hatchers-table-wrap{
  max-height: 430px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.hatch-top-hatchers-table thead{
  position: sticky;
  top: 0;
  z-index: 2;
}

.hatch-top-hatchers-table thead th{
  background: var(--panel, #11131a);
}