/* v18.4 mobile ship-detail mode comparison.
   Keep TOTAL / SOLO / DIV2 / DIV3 / RANK as true rows and fit all metrics on one phone screen. */
.exp-mode-head-mobile{display:none}
.exp-ship-mode-name{white-space:nowrap}
.exp-ship-mode-code{display:inline;margin-left:.35em;color:#748088;font-size:.72em;font-weight:650;letter-spacing:.02em}

@media (max-width:760px){
  /* The win-rate value is a span nested inside the hero strong. Generic mobile
     span rules were shrinking it to label size; inherit the hero number size. */
  #detailDialog .battle-detail-hero article strong>span[class*="wr-"]{
    font-size:inherit!important;
    line-height:inherit!important;
    font-weight:inherit!important;
  }

  #detailDialog .exp-ship-mode-wrap{
    width:100%!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
  }
  #detailDialog .exp-ship-mode-detail-table{
    display:table!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    white-space:nowrap!important;
    font-variant-numeric:tabular-nums!important;
  }
  #detailDialog .exp-ship-mode-detail-table thead{display:table-header-group!important}
  #detailDialog .exp-ship-mode-detail-table tbody{display:table-row-group!important}
  #detailDialog .exp-ship-mode-detail-table tbody tr{
    display:table-row!important;
    height:38px!important;
    padding:0!important;
    border:0!important;
  }
  #detailDialog .exp-ship-mode-detail-table th,
  #detailDialog .exp-ship-mode-detail-table td{
    display:table-cell!important;
    min-width:0!important;
    width:auto!important;
    height:auto!important;
    padding:5px 2px!important;
    border:0!important;
    border-bottom:1px solid #dce2e5!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    vertical-align:middle!important;
    line-height:1.08!important;
    letter-spacing:-.015em!important;
  }
  #detailDialog .exp-ship-mode-detail-table th{
    position:static!important;
    background:#edf0f2!important;
    color:#5d6870!important;
    font-size:8.5px!important;
    font-weight:650!important;
    text-align:center!important;
  }
  #detailDialog .exp-ship-mode-detail-table th::after{display:none!important;content:none!important}
  #detailDialog .exp-ship-mode-detail-table td{
    background:transparent!important;
    font-size:10.5px!important;
    text-align:right!important;
  }
  #detailDialog .exp-ship-mode-detail-table td:not(:first-child)::before{display:none!important;content:none!important}

  /* Full table headings fit comfortably on the first row; keep them explicit
     instead of the abbreviated mobile labels. */
  #detailDialog .exp-mode-head-full{display:inline!important}
  #detailDialog .exp-mode-head-mobile{display:none!important}

  /* 100% exactly: 16 + 8 + 13 + 15 + 20 + 13 + 15. */
  #detailDialog .exp-ship-mode-detail-table th:nth-child(1),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(1){width:16%!important;text-align:left!important;padding-left:5px!important}
  #detailDialog .exp-ship-mode-detail-table th:nth-child(2),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(2){width:8%!important}
  #detailDialog .exp-ship-mode-detail-table th:nth-child(3),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(3){width:13%!important}
  #detailDialog .exp-ship-mode-detail-table th:nth-child(4),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(4){width:15%!important}
  #detailDialog .exp-ship-mode-detail-table th:nth-child(5),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(5){width:20%!important}
  #detailDialog .exp-ship-mode-detail-table th:nth-child(6),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(6){width:13%!important}
  #detailDialog .exp-ship-mode-detail-table th:nth-child(7),
  #detailDialog .exp-ship-mode-detail-table td:nth-child(7){width:15%!important;padding-right:4px!important}

  #detailDialog .exp-ship-mode-cn{
    display:block!important;
    font-size:11px!important;
    line-height:1.05!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }
  #detailDialog .exp-ship-mode-code{
    display:block!important;
    margin:2px 0 0!important;
    color:#7b858c!important;
    font-size:7.5px!important;
    line-height:1!important;
    font-weight:650!important;
    letter-spacing:.025em!important;
  }
  #detailDialog .exp-ship-mode-detail-table strong[class*="pr-"]{font-size:11px!important;font-weight:650!important}
  #detailDialog .exp-ship-mode-detail-table td[class*="wr-"]{font-size:11px!important;font-weight:650!important}
}