/* Hungry Wars v107 — obvious tournament-style ranking rebuild */
#modal[data-view="mainRanks"]>.modal-window{
  width:min(95vw,1500px)!important;height:min(88vh,840px)!important;min-height:650px!important;
  border:3px solid #9e5a0e!important;border-radius:26px!important;
  box-shadow:0 18px 55px rgba(32,13,2,.55),inset 0 0 0 2px #f7d477!important;
  overflow:hidden!important;
}
#modal[data-view="mainRanks"] #modalBody{padding:0!important;overflow:hidden!important}
#modal[data-view="mainRanks"] .hw57-book{
  height:100%!important;padding:0!important;overflow:hidden!important;
  background:linear-gradient(180deg,#fff1bd 0%,#f6d989 100%)!important;
}
#modal[data-view="mainRanks"] .hw57-book:before{display:none!important}

/* Strong new header — deliberately very different from v106. */
#modal[data-view="mainRanks"] .hw57-book>header{
  min-height:108px!important;margin:0!important;padding:17px 90px 15px 118px!important;
  border:0!important;border-bottom:4px solid #d79018!important;
  background:
    radial-gradient(circle at 68% 0%,rgba(41,139,204,.17),transparent 35%),
    linear-gradient(180deg,#17263c 0%,#0b1728 100%)!important;
  box-shadow:inset 0 -1px #ffdf74,0 5px 12px rgba(72,39,6,.22)!important;
}
#modal[data-view="mainRanks"] .hw57-book-head-icon{
  left:24px!important;top:16px!important;width:72px!important;height:72px!important;
  display:grid!important;place-items:center!important;border:2px solid #e4a62c!important;border-radius:18px!important;
  background:linear-gradient(180deg,#fff2b5,#e6a837)!important;box-shadow:0 5px 0 #88500f!important;
}
#modal[data-view="mainRanks"] .hw57-book-head-icon img{width:58px!important;height:58px!important}
#modal[data-view="mainRanks"] .hw57-book-head-copy h2{
  margin:0!important;font-family:"Arial Black","Trebuchet MS",Arial,sans-serif!important;
  font-size:32px!important;line-height:1!important;letter-spacing:.02em!important;color:#ffd85e!important;
  text-shadow:0 2px #603d08,0 0 16px rgba(255,198,52,.15)!important;
}
#modal[data-view="mainRanks"] .hw57-book-head-copy h2:before,
#modal[data-view="mainRanks"] .hw57-book-head-copy h2:after{display:none!important}
#modal[data-view="mainRanks"] .hw57-book-head-copy p{margin:9px 0 0!important;font-size:13px!important;color:#aee8ff!important;font-weight:800!important}

#modal[data-view="mainRanks"] .hw57-book-pages{
  height:calc(100% - 108px)!important;padding:13px!important;gap:13px!important;
  grid-template-columns:1fr 1fr!important;background:linear-gradient(180deg,#f8dc8f,#f3cf72)!important;
}
#modal[data-view="mainRanks"] .hw57-page{
  min-width:0!important;min-height:0!important;padding:10px!important;border:2px solid #c47b17!important;border-radius:19px!important;
  background:linear-gradient(180deg,#fff8dc 0%,#ffe9ad 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 5px 10px rgba(114,63,7,.13)!important;
  display:flex!important;flex-direction:column!important;
}
#modal[data-view="mainRanks"] .hw57-page-head{
  min-height:66px!important;margin:0 0 8px!important;padding:10px 12px!important;border:0!important;border-radius:13px!important;
  background:linear-gradient(180deg,#70400f 0%,#482407 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 3px 0 #2e1603!important;
}
#modal[data-view="mainRanks"] .hw57-page-head h3{font-family:"Arial Black",Arial,sans-serif!important;font-size:24px!important;color:#ffdc78!important;text-shadow:0 2px #281304!important}
#modal[data-view="mainRanks"] .hw57-page-head p{margin-top:4px!important;font-size:10.5px!important;color:#ffe8b1!important}
#modal[data-view="mainRanks"] .hw57-page-mark{
  height:34px!important;padding:0 14px!important;border:1px solid #efbb4d!important;border-radius:10px!important;
  background:linear-gradient(180deg,#a64cf0,#6816b8)!important;color:white!important;box-shadow:0 3px #481077!important;
}
#modal[data-view="mainRanks"] .hw57-page-subtabs{gap:8px!important;margin:3px 0 9px!important;padding:0!important}
#modal[data-view="mainRanks"] .hw57-page-subtabs button{
  height:38px!important;padding:0 17px!important;border-radius:10px!important;font-size:10px!important;font-weight:1000!important;
}

/* New row markup. Old row-child rules are neutralised by direct-child grid. */
#modal[data-view="mainRanks"] .hw57-list{display:flex!important;flex-direction:column!important;gap:7px!important;min-height:0!important;overflow:auto!important;padding:2px 3px 6px!important}
#modal[data-view="mainRanks"] .hw107-row{
  display:grid!important;grid-template-columns:56px 54px minmax(0,1fr) 126px!important;align-items:center!important;gap:9px!important;
  min-height:72px!important;padding:6px 10px!important;margin:0!important;border:1.5px solid #d59024!important;border-radius:14px!important;
  background:linear-gradient(180deg,#fffef8 0%,#fae7b8 100%)!important;box-shadow:inset 0 1px white,0 3px 6px rgba(107,58,7,.10)!important;
  overflow:hidden!important;transform:none!important;
}
#modal[data-view="mainRanks"] .hw107-row:before{display:none!important}
#modal[data-view="mainRanks"] .hw107-row:hover{transform:translateY(-1px)!important;box-shadow:inset 0 1px white,0 7px 13px rgba(107,58,7,.16)!important}
#modal[data-view="mainRanks"] .hw107-row[data-rank="1"]{background:linear-gradient(100deg,#fff5bc,#ffe184 75%,#f5c751)!important;border-color:#d59b1a!important}
#modal[data-view="mainRanks"] .hw107-row[data-rank="2"]{background:linear-gradient(100deg,#fff,#ece9e2 78%,#d9d3c7)!important;border-color:#aea596!important}
#modal[data-view="mainRanks"] .hw107-row[data-rank="3"]{background:linear-gradient(100deg,#fff6e9,#f1c796 78%,#dfaa68)!important;border-color:#bd793d!important}
#modal[data-view="mainRanks"] .hw107-row.self{outline:3px solid rgba(78,183,45,.28)!important;border-color:#45a929!important}

#modal[data-view="mainRanks"] .hw107-place{display:grid!important;place-items:center!important;width:56px!important;height:62px!important;overflow:visible!important}
#modal[data-view="mainRanks"] .hw107-place .hw57-rank-badge{margin:0!important}
#modal[data-view="mainRanks"] .hw107-place .hw69-rank-art{width:58px!important;height:66px!important;margin:0!important}
#modal[data-view="mainRanks"] .hw107-avatar{width:48px!important;height:48px!important;flex:none!important;border:3px solid #d49422!important;border-radius:50%!important;overflow:hidden!important;background:#40200a!important}
#modal[data-view="mainRanks"] .hw107-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
#modal[data-view="mainRanks"] .hw107-crest{width:54px!important;height:54px!important;display:grid!important;place-items:center!important;overflow:visible!important}
#modal[data-view="mainRanks"] .hw107-crest .hw65-clan-real-crest{width:54px!important;height:54px!important;flex:none!important;filter:drop-shadow(0 3px 3px rgba(81,43,4,.26))!important}
#modal[data-view="mainRanks"] .hw107-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;overflow:hidden!important}
#modal[data-view="mainRanks"] .hw107-title{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important}
#modal[data-view="mainRanks"] .hw107-title>b{
  min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  font-family:"Arial Black","Trebuchet MS",Arial,sans-serif!important;font-size:17px!important;line-height:1.05!important;color:#542805!important;text-shadow:none!important;
}
#modal[data-view="mainRanks"] .hw107-clan-name{font-size:17px!important}
#modal[data-view="mainRanks"] .hw107-verified{font-style:normal!important;color:#26a842!important;font-size:16px!important;flex:0 0 auto!important}
#modal[data-view="mainRanks"] .hw107-tag{
  display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;padding:3px 7px!important;border-radius:7px!important;
  border:1px solid color-mix(in srgb,var(--tag) 75%,#7a420b)!important;background:color-mix(in srgb,var(--tag) 13%,#fff7dc)!important;
  color:color-mix(in srgb,var(--tag) 70%,#492203)!important;font-size:10px!important;font-weight:1000!important;letter-spacing:.025em!important;line-height:1!important;
}
#modal[data-view="mainRanks"] .hw107-meta{display:flex!important;align-items:center!important;gap:6px!important;margin-top:7px!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important;font-size:10px!important;font-weight:800!important;color:#81511e!important}
#modal[data-view="mainRanks"] .hw107-meta>i:not(.hw107-dot){width:3px!important;height:3px!important;border-radius:50%!important;background:#c48625!important;flex:0 0 3px!important}
#modal[data-view="mainRanks"] .hw107-dot{width:8px!important;height:8px!important;border-radius:50%!important;flex:0 0 8px!important;background:#aaa!important}
#modal[data-view="mainRanks"] .hw107-dot.online{background:#39c94b!important;box-shadow:0 0 6px rgba(30,193,62,.6)!important}
#modal[data-view="mainRanks"] .hw107-dot.offline{background:#a8a8a8!important}
#modal[data-view="mainRanks"] .hw107-score{
  justify-self:stretch!important;min-width:0!important;padding:8px 8px!important;border-radius:10px!important;text-align:center!important;
  background:linear-gradient(180deg,#693708,#3e1d03)!important;border:1px solid #a96816!important;box-shadow:inset 0 1px rgba(255,255,255,.15)!important;
}
#modal[data-view="mainRanks"] .hw107-score strong{display:block!important;color:#ffe07d!important;font-family:"Arial Black",Arial,sans-serif!important;font-size:17px!important;line-height:1!important;white-space:nowrap!important;text-shadow:0 1px #1f0c00!important}
#modal[data-view="mainRanks"] .hw107-score small{display:block!important;margin-top:5px!important;color:#ffdba4!important;font-size:8px!important;font-weight:900!important;line-height:1!important;letter-spacing:.04em!important;white-space:nowrap!important}
#modal[data-view="mainRanks"] .hw107-score.power strong{font-size:18px!important}

/* Put self card before pager and make it useful instead of hiding at the bottom. */
#modal[data-view="mainRanks"] .hw57-page.right .hw57-list{order:2!important}
#modal[data-view="mainRanks"] .hw57-page.right .hw57-self-card{order:3!important;margin:8px 2px 0!important;padding:7px!important;border-radius:12px!important;background:#e9f8c9!important;border:1px solid #79b945!important}
#modal[data-view="mainRanks"] .hw57-page.right .hw57-pager{order:4!important;margin-top:auto!important}
#modal[data-view="mainRanks"] .hw57-page.left .hw57-pager{margin-top:auto!important}
#modal[data-view="mainRanks"] .hw57-pager{padding-top:7px!important}
#modal[data-view="mainRanks"] .hw57-pager button{width:36px!important;height:34px!important;border-radius:9px!important}
#modal[data-view="mainRanks"] .hw57-footnote{font-size:8px!important;color:#8b5d25!important;padding-top:5px!important}

@media(max-height:760px){
  #modal[data-view="mainRanks"]>.modal-window{height:94vh!important;min-height:570px!important}
  #modal[data-view="mainRanks"] .hw57-book>header{min-height:86px!important;padding-top:12px!important;padding-bottom:10px!important}
  #modal[data-view="mainRanks"] .hw57-book-head-copy h2{font-size:27px!important}
  #modal[data-view="mainRanks"] .hw57-book-pages{height:calc(100% - 86px)!important;padding:9px!important}
  #modal[data-view="mainRanks"] .hw57-page-head{min-height:54px!important;padding:7px 10px!important}
  #modal[data-view="mainRanks"] .hw107-row{min-height:62px!important;grid-template-columns:48px 46px minmax(0,1fr) 112px!important;padding:4px 8px!important}
  #modal[data-view="mainRanks"] .hw107-place{width:48px!important;height:54px!important}
  #modal[data-view="mainRanks"] .hw107-place .hw69-rank-art{width:50px!important;height:57px!important}
  #modal[data-view="mainRanks"] .hw107-avatar{width:42px!important;height:42px!important}
  #modal[data-view="mainRanks"] .hw107-crest{width:46px!important;height:46px!important}
  #modal[data-view="mainRanks"] .hw107-crest .hw65-clan-real-crest{width:46px!important;height:46px!important}
  #modal[data-view="mainRanks"] .hw107-title>b{font-size:14.5px!important}
  #modal[data-view="mainRanks"] .hw107-meta{margin-top:4px!important;font-size:8.5px!important}
  #modal[data-view="mainRanks"] .hw107-score strong{font-size:14px!important}
}
@media(max-width:1050px){
  #modal[data-view="mainRanks"]>.modal-window{width:97vw!important;height:95vh!important}
  #modal[data-view="mainRanks"] #modalBody,#modal[data-view="mainRanks"] .hw57-book{overflow:auto!important}
  #modal[data-view="mainRanks"] .hw57-book-pages{grid-template-columns:1fr!important;height:auto!important}
  #modal[data-view="mainRanks"] .hw57-page{min-height:520px!important}
}