/*
 * JLPT180 Daily Board Rank Mobile Podium CSS owner.
 * P4.44: moved mobile podium/medal/rank tier selectors.
 */
@media (max-width: 899px){
#tdb-rank-board .tdb-podium{
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 7px;
              min-height: 0;
              align-items: stretch;
              padding: 0;
            }


            #tdb-rank-board .tdb-podium-card,
#tdb-rank-board .tdb-podium-card.rank-1,
#tdb-rank-board .tdb-podium-card.rank-2,
#tdb-rank-board .tdb-podium-card.rank-3{
              min-height: 188px;
              padding: 12px 6px;
              border-radius: 18px;
              border-width: 2px;
            }


            #tdb-rank-board .tdb-medal,
#tdb-rank-board .rank-1 .tdb-medal{
              width: 34px;
              height: 34px;
              font-size: 18px;
              margin-bottom: 6px;
            }


            #tdb-rank-board .tdb-podium-avatar,
#tdb-rank-board .rank-1 .tdb-podium-avatar{
              width: 58px;
              height: 58px;
              margin-bottom: 6px;
              box-shadow: 0 8px 15px rgba(20,82,130,.14);
            }


            #tdb-rank-board .tdb-podium-name,
#tdb-rank-board .rank-1 .tdb-podium-name{
              font-size: 12px;
              min-height: 28px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
}


@media (max-width: 380px){
#tdb-rank-board .tdb-podium-card,
#tdb-rank-board .tdb-podium-card.rank-1,
#tdb-rank-board .tdb-podium-card.rank-2,
#tdb-rank-board .tdb-podium-card.rank-3{
              grid-template-columns: 36px 48px minmax(0,1fr) auto;
              gap: 7px;
              padding: 10px 8px;
            }


            #tdb-rank-board .tdb-medal,
#tdb-rank-board .rank-1 .tdb-medal{
              width: 32px;
              height: 32px;
              font-size: 16px;
            }


            #tdb-rank-board .tdb-podium-avatar,
#tdb-rank-board .rank-1 .tdb-podium-avatar{
              width: 48px;
              height: 48px;
            }


            #tdb-rank-board .tdb-podium-name,
#tdb-rank-board .rank-1 .tdb-podium-name{
              font-size: 14px;
            }


            #tdb-rank-board .tdb-podium-card .tdb-score{
              max-width: 72px;
            }


            #tdb-rank-board .tdb-podium-card .tdb-score b{
              font-size: 12px;
            }
}


@media (max-width: 899px){
#tdb-rank-board .tdb-podium{
              display: grid;
              grid-template-columns: 1fr;
              gap: 12px;
              min-height: 0;
              padding: 2px 4px 12px;
              margin: 0 0 14px;
              align-items: stretch;
            }


            #tdb-rank-board .tdb-podium-card,
#tdb-rank-board .tdb-podium-card.rank-1,
#tdb-rank-board .tdb-podium-card.rank-2,
#tdb-rank-board .tdb-podium-card.rank-3{
              width: 100%;
              max-width: 100%;
              min-width: 0;
              min-height: 0;
              height: auto;
              transform: none;
              position: relative;
              display: grid;
              grid-template-columns: 42px 58px minmax(0, 1fr) auto;
              grid-template-areas:
                "medal avatar name score"
                "medal avatar realm score";
              gap: 8px 10px;
              align-items: center;
              text-align: left;
              padding: 12px 10px;
              border-radius: 20px;
              border-width: 3px;
              overflow: hidden;
            }


            #tdb-rank-board .tdb-podium-card.rank-1{
              order: 1;
              border-color: #d99000;
              background:
                radial-gradient(circle at 10% 10%, rgba(255,255,255,.92), transparent 30%),
                radial-gradient(circle at 88% 14%, rgba(255,223,93,.44), transparent 28%),
                linear-gradient(135deg, #fff8cc 0%, #fff2a8 46%, #fffaf0 100%);
              box-shadow:
                0 0 0 3px rgba(255,255,255,.92) inset,
                0 0 26px rgba(245,158,11,.35),
                0 14px 26px rgba(180,83,9,.16);
            }


            #tdb-rank-board .tdb-podium-card.rank-2{
              order: 2;
              border-color: #60a5fa;
              background:
                radial-gradient(circle at 10% 10%, rgba(255,255,255,.96), transparent 30%),
                radial-gradient(circle at 88% 14%, rgba(125,211,252,.42), transparent 28%),
                linear-gradient(135deg, #eff6ff 0%, #dbeafe 48%, #f8fbff 100%);
              box-shadow:
                0 0 0 3px rgba(255,255,255,.90) inset,
                0 0 24px rgba(96,165,250,.30),
                0 14px 26px rgba(37,99,235,.12);
            }


            #tdb-rank-board .tdb-podium-card.rank-3{
              order: 3;
              border-color: #fb923c;
              background:
                radial-gradient(circle at 10% 10%, rgba(255,255,255,.94), transparent 30%),
                radial-gradient(circle at 88% 14%, rgba(253,186,116,.44), transparent 28%),
                linear-gradient(135deg, #fff7ed 0%, #fed7aa 48%, #fffaf5 100%);
              box-shadow:
                0 0 0 3px rgba(255,255,255,.90) inset,
                0 0 24px rgba(251,146,60,.28),
                0 14px 26px rgba(194,65,12,.12);
            }


            #tdb-rank-board .tdb-podium-card::before{
              inset: 7px;
              border-radius: 15px;
              border-width: 1px;
              opacity: .86;
            }


            #tdb-rank-board .tdb-podium-card::after{
              top: 8px;
              right: 10px;
              font-size: 12px;
              opacity: .45;
            }


            #tdb-rank-board .tdb-medal,
#tdb-rank-board .rank-1 .tdb-medal{
              grid-area: medal;
              width: 36px;
              height: 36px;
              margin: 0;
              font-size: 18px;
              justify-self: center;
              align-self: center;
            }


            #tdb-rank-board .rank-1 .tdb-medal{
              background: linear-gradient(180deg, #fde68a, #d99000);
              box-shadow: 0 0 0 6px rgba(245,158,11,.12), inset 0 0 0 3px rgba(255,255,255,.78);
            }


            #tdb-rank-board .rank-2 .tdb-medal{
              background: linear-gradient(180deg, #e0f2fe, #60a5fa);
              box-shadow: 0 0 0 6px rgba(96,165,250,.12), inset 0 0 0 3px rgba(255,255,255,.78);
            }


            #tdb-rank-board .rank-3 .tdb-medal{
              background: linear-gradient(180deg, #fed7aa, #ea580c);
              box-shadow: 0 0 0 6px rgba(251,146,60,.12), inset 0 0 0 3px rgba(255,255,255,.78);
            }


            #tdb-rank-board .tdb-podium-avatar,
#tdb-rank-board .rank-1 .tdb-podium-avatar{
              grid-area: avatar;
              width: 54px;
              height: 54px;
              margin: 0;
              justify-self: center;
              align-self: center;
              border-width: 3px;
            }


            #tdb-rank-board .tdb-podium-name,
#tdb-rank-board .rank-1 .tdb-podium-name{
              grid-area: name;
              min-height: 0;
              margin: 0;
              font-size: 15px;
              line-height: 1.16;
              font-weight: 1000;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              max-width: 100%;
            }


            #tdb-rank-board .tdb-podium-card.rank-1 .tdb-podium-name{
              color: #a16207;
              text-shadow: 0 1px 0 rgba(255,255,255,.68), 0 0 10px rgba(245,158,11,.16);
            }


            #tdb-rank-board .tdb-podium-card.rank-2 .tdb-podium-name{
              color: #1d4ed8;
              text-shadow: 0 1px 0 rgba(255,255,255,.68), 0 0 10px rgba(96,165,250,.16);
            }


            #tdb-rank-board .tdb-podium-card.rank-3 .tdb-podium-name{
              color: #c2410c;
              text-shadow: 0 1px 0 rgba(255,255,255,.68), 0 0 10px rgba(251,146,60,.15);
            }


            #tdb-rank-board .tdb-podium-card > .tdb-realm-pill,
#tdb-rank-board .tdb-podium-card .tdb-realm-pill{
              grid-area: realm;
              justify-self: start;
              max-width: 100%;
              margin: 0;
              min-height: 22px;
              padding: 1px 8px;
              font-size: 10px;
              line-height: 1.2;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }


            #tdb-rank-board .tdb-podium-card > .tdb-score,
#tdb-rank-board .tdb-podium-card .tdb-score{
              grid-area: score;
              justify-self: end;
              align-self: center;
              margin: 0;
              min-width: 62px;
              max-width: 86px;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              gap: 3px;
              text-align: right;
              flex-wrap: nowrap;
            }


            #tdb-rank-board .tdb-podium-card .tdb-score img{
              width: 18px;
              height: 18px;
              flex: 0 0 auto;
            }


            #tdb-rank-board .tdb-podium-card .tdb-score b{
              font-size: 13px;
              line-height: 1;
              white-space: nowrap;
            }


            #tdb-rank-board .tdb-podium-card .tdb-score small,
#tdb-rank-board .tdb-podium-card .tdb-score em{
              display: none;
            }
}