/*
 * JLPT180 Daily Board Rank Mobile Side/My Rank CSS owner.
 * P4.44: moved mobile side/me/npc selectors.
 */
@media (max-width: 899px){
#tdb-rank-board .tdb-side{ grid-template-columns: 1fr; }


            no duplicate panels. */
            #tdb-rank-board .tdb-side-card{
              border-radius: 22px;
              padding: 12px;
              background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,249,255,.94));
              box-shadow: 0 14px 28px rgba(20,82,130,.12), inset 0 0 0 1px rgba(255,255,255,.82);
              overflow: visible;
            }


            #tdb-rank-board .tdb-side-card::before,
#tdb-rank-board .tdb-side-card::after,
#tdb-rank-board .tdb-side-card .tdb-me-panel::before,
#tdb-rank-board .tdb-side-title::before,
#tdb-rank-board .tdb-side-title::after{
              display: none;
              content: none;
            }


            #tdb-rank-board .tdb-side-title{
              width: max-content;
              max-width: 100%;
              margin: 0 auto 10px;
              padding: 6px 14px;
              border-radius: 999px;
              border: 1px solid rgba(218, 159, 45, .42);
              background: linear-gradient(180deg, #fff8df, #fff);
              color: #123f88;
              font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
              font-size: 13px;
              line-height: 1.1;
              font-weight: 900;
              letter-spacing: 0;
              text-transform: none;
              text-align: center;
              text-shadow: none;
            }


            #tdb-rank-board .tdb-me-panel{
              display: none;
            }


            #tdb-rank-board .tdb-me-panel.is-active{
              display: block;
            }


            #tdb-rank-board .tdb-me-top{
              display: grid;
              grid-template-columns: 58px minmax(0, 1fr);
              gap: 10px;
              align-items: center;
              padding: 8px;
              border-radius: 16px;
              border: 1px solid rgba(174, 210, 236, .72);
              background: rgba(255,255,255,.58);
            }


            #tdb-rank-board .tdb-me-avatar{
              width: 58px;
              height: 58px;
              border-radius: 16px;
              border: 2px solid rgba(218, 159, 45, .55);
              box-shadow: 0 8px 16px rgba(20,82,130,.10);
              overflow: hidden;
            }


            #tdb-rank-board .tdb-me-top > div:last-child{
              min-width: 0;
              display: grid;
              grid-template-columns: auto minmax(0, 1fr);
              grid-template-areas:
                "rank name"
                "rank pill";
              column-gap: 8px;
              row-gap: 3px;
              align-items: center;
            }


            #tdb-rank-board .tdb-me-rank{
              grid-area: rank;
              color: #d28a00;
              font-size: 22px;
              font-weight: 1000;
              font-family: Georgia, serif;
              line-height: 1;
              text-shadow: none;
            }


            #tdb-rank-board .tdb-me-name{
              grid-area: name;
              min-width: 0;
              color: #7a471c;
              font-size: 14px;
              line-height: 1.15;
              font-weight: 1000;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }


            #tdb-rank-board .tdb-me-top .tdb-realm-pill,
#tdb-rank-board .tdb-me-top .tdb-npc-pill{
              grid-area: pill;
              width: max-content;
              max-width: 100%;
              margin: 0;
              min-height: 18px;
              padding: 0 7px;
              font-size: 9px;
              justify-self: start;
            }


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


            #tdb-rank-board .tdb-me-stat{
              min-height: 62px;
              padding: 7px 4px;
              border-radius: 13px;
              border: 1px solid rgba(214, 143, 14, .42);
              box-shadow: 0 8px 14px rgba(20,82,130,.09), inset 0 0 0 1px rgba(255,255,255,.78);
            }


            #tdb-rank-board .tdb-me-stat img{
              width: 19px;
              height: 19px;
            }


            #tdb-rank-board .tdb-me-stat b{
              font-size: 13px;
              line-height: 1;
            }


            #tdb-rank-board .tdb-me-stat span{
              font-size: 8.5px;
              line-height: 1.12;
            }
}


@media (max-width: 430px){
#tdb-rank-board .tdb-side-card{ padding: 11px; }


            #tdb-rank-board .tdb-me-top{
              grid-template-columns: 54px minmax(0, 1fr);
              gap: 9px;
              padding: 7px;
            }


            #tdb-rank-board .tdb-me-avatar{
              width: 54px;
              height: 54px;
              border-radius: 15px;
            }


            #tdb-rank-board .tdb-me-rank{ font-size: 20px; }


            #tdb-rank-board .tdb-me-name{ font-size: 13px; }


            #tdb-rank-board .tdb-me-stats{ gap: 5px; }


            #tdb-rank-board .tdb-me-stat{
              min-height: 58px;
              padding: 6px 3px;
            }
}