/*
 * JLPT180 Daily Board Rank Mobile Base CSS owner.
 * P4.44: base responsive frame/title/tabs/list shell rules remain here.
 */
/*
 * JLPT180 Daily Board Rank Mobile CSS owner.
 * P4.42: moved @media blocks out of daily-board-rank.css.
 * Scope: responsive rules for #tdb-rank-board.
 */
@media (max-width: 1100px){
#tdb-rank-board .tdb-board-grid{ grid-template-columns: minmax(0, 1fr); }


            #tdb-rank-board .tdb-side{ grid-template-columns: minmax(0, 1fr); }
}


@media (max-width: 899px){
#tdb-rank-board .tdb-page-title::before,
#tdb-rank-board .tdb-page-title::after{ display: none; }


            #tdb-rank-board .tdb-page-title h1{
              font-size: 34px;
              line-height: 1.05;
            }


            #tdb-rank-board .tdb-page-title p{
              min-width: 0;
              width: 100%;
              font-size: 13px;
            }


            #tdb-rank-board .tdb-tabs{
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 6px;
              margin-bottom: 10px;
            }


            #tdb-rank-board .tdb-tab{
              min-height: 58px;
              border-radius: 18px 18px 8px 8px;
              padding: 6px 4px;
              gap: 4px;
              flex-direction: column;
              font-size: 12px;
              line-height: 1.1;
            }


            #tdb-rank-board .tdb-tab img{
              width: 28px;
              height: 28px;
            }


            #tdb-rank-board .tdb-board-main{
              padding: 12px;
              border-radius: 24px;
            }


            #tdb-rank-board .tdb-realm-pill{
              min-height: 20px;
              padding: 0 6px;
              font-size: 9px;
              margin: 5px auto;
            }


            #tdb-rank-board .tdb-score{
              gap: 2px;
              font-size: 12px;
              flex-wrap: wrap;
            }


            #tdb-rank-board .tdb-score img{
              width: 17px;
              height: 17px;
            }


            #tdb-rank-board .tdb-score small{ display: none; }


            #tdb-rank-board .tdb-score-power small{
              display: inline-flex;
              font-size: 9px;
              padding: 1px 5px;
            }
}


@media (max-width: 899px){
#tdb-rank-board .tdb-board-main{
              overflow: hidden;
            }
}

/* v30.13: mobile TDB tabs/list fit; no clipped Top Chăm Chỉ text. */
@media (max-width:899px){
  #tdb-rank-board .tdb-tabs,
  #tdb-rank-board .tdb-v3b-subtabs{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    overflow:visible;
  }

  #tdb-rank-board .tdb-tab{
    min-width:0;
    min-height:48px;
    padding:5px 3px;
    border-radius:15px;
    border-width:1.5px;
    gap:3px;
    font-size:10.5px;
    line-height:1.05;
    white-space:normal;
    word-break:keep-all;
    text-align:center;
  }

  #tdb-rank-board .tdb-tab img{
    width:22px;
    height:22px;
  }

  #tdb-rank-board .tdb-board-main{
    padding:10px 8px calc(104px + env(safe-area-inset-bottom));
    overflow:visible;
  }

  #tdb-rank-board .tdb-list-title{
    font-size:18px;
    line-height:1.16;
    margin:12px 0 10px;
    letter-spacing:.06em;
  }
}