/* Zenkai Idle R7.10.87 — PC readability + natural asset proportions
   Base: R7.10.86.
   IMPORTANT: shell size stays unchanged. This pass fixes the interior only.
   - no fake enlargement of the modal;
   - decorative PNGs use contain / proportional sizing instead of 100% 100%;
   - typography is raised to readable desktop sizes;
   - the former dead center area is used by a 4+3 stats layout and larger pulls.
*/

/* -------------------------------------------------------------
   1) NEVER STRETCH THE VISUAL ASSETS
   ------------------------------------------------------------- */
#huntModal .zk63-shell .zk63-search,
#huntModal .zk63-shell .zk63-hunt-card,
#huntModal .zk63-shell .zk63-loot-row,
#huntModal .zk63-shell .zk63-start,
#huntModal .zk63-shell .zk63-close{
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Keep the long divider/header proportional. It may crop a little vertically,
   but must never be squeezed into an unnatural ratio. */
#huntModal .zk63-shell .zk63-section-title{
  background-size:100% auto!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#huntModal .zk63-shell .zk63-right::before{
  background-size:100% auto!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Stats were the most distorted assets: 681x230 (~2.96:1) had been forced
   into very tall narrow boxes. Preserve their authored ratio. */
#huntModal .zk63-shell .zk63-stat{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2.91/1!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Pull presets already use separate normal/active PNGs. Keep them contained. */
#huntModal .zk63-shell .zk63-pull{
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* -------------------------------------------------------------
   2) DESKTOP PC — V86 shell remains exactly the same size.
   Only the interior hierarchy changes.
   ------------------------------------------------------------- */
@media (min-width:1366px) and (min-height:720px){
  /* Explicitly preserve V86 shell; no V87 growth. */
  #huntModal .hunt-browser-modal.zk63-shell{
    width:min(1320px,calc(100vw - 90px),calc((100dvh - 74px) * 1691 / 930))!important;
    top:-16px!important;
  }

  /* LEFT — readable at normal desktop distance. */
  #huntModal .zk63-shell .zk63-left{
    grid-template-rows:45px 23px minmax(0,1fr)!important;
  }
  #huntModal .zk63-shell .zk63-search input{
    font-size:13px!important;
  }
  #huntModal .zk63-shell .zk63-count{
    height:23px!important;
    line-height:23px!important;
    font-size:10.3px!important;
  }
  #huntModal .zk63-shell .zk63-hunt-card{
    height:70px!important;
    min-height:70px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:10px!important;
    padding:8px 18px 8px 11px!important;
    background-color:#06182f!important;
  }
  #huntModal .zk63-shell .zk63-hunt-card>img{
    width:46px!important;
    height:46px!important;
  }
  #huntModal .zk63-shell .zk63-hunt-card b{
    font-size:13.2px!important;
    line-height:1.08!important;
  }
  #huntModal .zk63-shell .zk63-hunt-card small{
    margin-top:3px!important;
    font-size:10.1px!important;
    line-height:1.12!important;
  }
  #huntModal .zk63-shell .zk63-hunt-card em{
    margin-top:3px!important;
    font-size:9px!important;
    line-height:1.1!important;
  }

  /* CENTER — use the space instead of leaving a dead lower half.
     Summary / two-row stats / pull title / pull selector. */
  #huntModal .hunt-browser-modal.zk63-shell .zk63-center{
    grid-template-rows:minmax(116px,1.18fr) 86px 28px minmax(94px,.90fr)!important;
    gap:5px!important;
    align-content:stretch!important;
    padding:36px 12px 10px!important;
  }
  #huntModal .zk63-shell .zk63-summary{
    grid-template-columns:68px minmax(0,1fr) 148px!important;
    gap:11px!important;
  }
  #huntModal .zk63-shell .zk63-portrait{
    width:65px!important;
    height:65px!important;
  }
  #huntModal .zk63-shell .zk63-portrait img{
    width:51px!important;
    height:51px!important;
  }
  #huntModal .zk63-shell .zk63-copy h2{
    font-size:24px!important;
    line-height:1.06!important;
  }
  #huntModal .zk63-shell .zk63-level{
    margin-top:3px!important;
    font-size:11.2px!important;
  }
  #huntModal .zk63-shell .zk63-copy p{
    margin-top:7px!important;
    font-size:11.4px!important;
    line-height:1.34!important;
    -webkit-line-clamp:4!important;
  }
  #huntModal .zk63-shell .zk63-record{
    width:148px!important;
    height:82px!important;
    padding:27px 13px 7px!important;
    background-size:contain!important;
  }
  #huntModal .zk63-shell .zk63-record-body{
    font-size:9.5px!important;
    line-height:1.28!important;
    max-height:47px!important;
  }

  /* 7 stats = 4 on first row + 3 centered on second row.
     This fixes their real aspect ratio and makes baked labels readable. */
  #huntModal .zk63-shell .zk63-stats{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:3px 5px!important;
    width:100%!important;
    height:86px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  #huntModal .zk63-shell .zk63-stat:nth-child(1){grid-column:1/3!important}
  #huntModal .zk63-shell .zk63-stat:nth-child(2){grid-column:3/5!important}
  #huntModal .zk63-shell .zk63-stat:nth-child(3){grid-column:5/7!important}
  #huntModal .zk63-shell .zk63-stat:nth-child(4){grid-column:7/9!important}
  #huntModal .zk63-shell .zk63-stat:nth-child(5){grid-column:2/4!important}
  #huntModal .zk63-shell .zk63-stat:nth-child(6){grid-column:4/6!important}
  #huntModal .zk63-shell .zk63-stat:nth-child(7){grid-column:6/8!important}
  #huntModal .zk63-shell .zk63-stat>span{
    right:8px!important;
    bottom:5px!important;
    font-size:9.4px!important;
    padding:2px 4px!important;
  }

  /* Divider is allowed more height, but its PNG stays proportional. */
  #huntModal .zk63-shell .zk63-section-title{
    height:28px!important;
    min-height:28px!important;
    padding:0 15px!important;
    font-size:11.2px!important;
  }
  #huntModal .zk63-shell .zk63-section-title small{
    font-size:9.3px!important;
  }

  /* Pulls — natural PNGs, substantial selected state, no deformation. */
  #huntModal .zk63-shell .zk63-pulls{
    min-height:94px!important;
    gap:9px!important;
    padding:2px 4px 4px!important;
    align-items:center!important;
  }
  #huntModal .zk63-shell .zk63-pull{
    width:88%!important;
    height:68px!important;
    min-height:68px!important;
  }
  #huntModal .zk63-shell .zk63-pull.active{
    width:100%!important;
    height:90px!important;
    min-height:90px!important;
  }
  #huntModal .zk63-shell .zk63-pull:not(.active):not(:disabled):hover{
    width:94%!important;
    height:76px!important;
    min-height:76px!important;
  }
  #huntModal .zk63-shell .zk63-pull-level{
    right:8px!important;
    top:5px!important;
    font-size:8.5px!important;
    padding:2px 5px!important;
  }

  /* RIGHT — text floor raised; rows stay near their authored 4.7:1 ratio. */
  #huntModal .zk63-shell .zk63-right{
    padding:46px 6px 6px 8px!important;
  }
  #huntModal .zk63-shell .zk63-right::before{
    height:47px!important;
  }
  #huntModal .zk63-shell .zk63-loot-group-title{
    height:25px!important;
    line-height:25px!important;
    padding:0 8px!important;
    font-size:10.5px!important;
  }
  #huntModal .zk63-shell .zk63-loot-row{
    min-height:59px!important;
    height:59px!important;
    grid-template-columns:44px minmax(0,1fr) 43px!important;
    gap:9px!important;
    margin-bottom:6px!important;
    padding:6px 8px!important;
    background-color:#06182f!important;
  }
  #huntModal .zk63-shell .zk63-loot-row>img{
    width:39px!important;
    height:39px!important;
  }
  #huntModal .zk63-shell .zk63-loot-row>span{
    line-height:1.08!important;
  }
  #huntModal .zk63-shell .zk63-loot-row>span b{
    font-size:12px!important;
    line-height:1.1!important;
  }
  #huntModal .zk63-shell .zk63-loot-row>span small{
    margin-top:3px!important;
    font-size:9.3px!important;
    line-height:1.08!important;
  }
  #huntModal .zk63-shell .zk63-loot-row>span em{
    margin-top:2px!important;
    font-size:8.8px!important;
    line-height:1.08!important;
  }
  #huntModal .zk63-shell .zk63-loot-state{
    width:24px!important;
    height:24px!important;
  }

  /* Footer: visual buttons no longer stretched horizontally. */
  #huntModal .zk63-shell .zk63-notice{font-size:9.8px!important}
  #huntModal .zk63-shell .zk63-start{
    width:210px!important;
    height:48px!important;
  }
  #huntModal .zk63-shell .zk63-close{
    width:108px!important;
    height:48px!important;
  }
}

/* -------------------------------------------------------------
   3) NOTEBOOK — keep 3 columns, but do not allow microscopic text.
   V85 sizing remains the basis; this only raises the readability floor and
   preserves PNG proportions.
   ------------------------------------------------------------- */
@media (min-width:901px) and (max-width:1365px),
       (min-width:901px) and (max-height:719px){
  #huntModal .zk63-shell .zk63-hunt-card b{font-size:11.4px!important}
  #huntModal .zk63-shell .zk63-hunt-card small{font-size:8.5px!important}
  #huntModal .zk63-shell .zk63-hunt-card em{font-size:7.6px!important}
  #huntModal .zk63-shell .zk63-copy h2{font-size:19.5px!important}
  #huntModal .zk63-shell .zk63-level{font-size:9.1px!important}
  #huntModal .zk63-shell .zk63-copy p{font-size:9.3px!important;line-height:1.3!important}
  #huntModal .zk63-shell .zk63-loot-row>span b{font-size:10px!important}
  #huntModal .zk63-shell .zk63-loot-row>span small{font-size:7.5px!important}
  #huntModal .zk63-shell .zk63-loot-row>span em{font-size:7.2px!important}
  #huntModal .zk63-shell .zk63-section-title{font-size:9.4px!important}
}