main {
    max-width: 380px;
    margin: 0 auto;
    padding: 16px;
}

h1 {
    font-size: 20px;
    margin: 0;
}

.sub {
    color: #0b6b5c;
    font-weight: bold;
    font-size: 14px;
    margin: 2px 0 14px;
}

.group {
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
}

.subr
{
    margin-top:5px !important;
}




.r1 {
    background: #f8e7b9;
    background-color: #f8e7b9;
}

.r1 .subr {
    background: #f7f8f9 !important;
    background-color: #f7f8f9 !important;
}

.r2 {
    background: #dfe3e8;
    background-color: #dfe3e8;
}

.r2 .subr {
    background: #f7f8f9 !important;
    background-color: #f7f8f9 !important;
}

.r3 {
    background: #ecdacf;
    background-color: #ecdacf;
}

.r3 .subr
 {
    background: #f8f2ef !important;
    background-color: #f8f2ef !important;
}

.rn {
    background: #f2f2f2;
    background-color: #f2f2f2;
}

.rn .subr {
    background: #f7f8f9 !important;
    background-color: #f7f8f9 !important;
}


.medal {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #0006;
    border: 4px solid #ffffff88;
    box-shadow: 0 2px 6px #0004;
}

.m1 {
    background: radial-gradient(circle at 30% 30%, #ffe27a, #d9a21b);
}

.m2 {
    background: radial-gradient(circle at 30% 30%, #f2f2f2, #8f959c);
}

.m3 {
    background: radial-gradient(circle at 30% 30%, #e8a46f, #9c5a2c);
}

.player {
    margin-bottom: 8px;
}

.player:last-child {
    margin-bottom: 0;
}

.name {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin: 6px 0;
}

.rn .name {
    text-align: left;
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.pos {
    font-weight: normal;
    color: #666;
}

/*.pod_Stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-radius: 4px;
}*/
/* Stats strip colours, sampled from the mockup */
/*.r1 .stats {
    background: #fefaee;
}

.r2 .stats {
    background: #f7f8f9;
}

.r3 .stats {
    background: #f8f2ef;
}

.rn .stats {
    background: #f7f8f9;
}*/

/*.stats div {
    text-align: center;
    padding: 4px 2px;
    font-size: 11px;
}

.stats span {
    display: block;
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stats b {
    font-size: 12px;
}
*/

/* Podium */

.POD_Main {
}

/*.POD_Main *,
.POD_Main *::before,
.POD_Main *::after
{
    box-sizing: border-box;
}
*/
.POD_Actions {
    margin-top: 20px;
    text-align: right;
    margin-right: 5px;
}

.POD_StoredContent_Static {
    margin-left: 10px;
}

.POD_StoredContent_Dynamic {
    padding-top: 10px;
    border: none 1px #FF0000;
}

.POD_StoredContent_Dynamic > .feedback {
    text-align: center;
    font-size: 12pt;
    margin-top: 30px;
}

/* Actual Podium*/
.POD_MasterBox {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
    padding: 5px;
}

.pod_MedalBox
{

}

.pod_MedalIcon {
    width: 80px !important;
}

/* Name */
.pod_Name {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left | name | right */
    align-items: center;
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
    font-weight: bold;
}

.pod_Name_ZZZ {
    margin-top: 10px;
    font-size: 15px;
    font-weight: bold;
}

.pod_Num {
    justify-self: start; /* hug the left edge */
    padding-left: 6px;
    font-size: 13px;
    color: #666;
}

.pod_NameText {
    grid-column: 2; /* always the middle column */
    font-size: 15px;
    font-weight: bold;
}

/* Stats */
.pod_Stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top:0px;
}

.pod_Stats div {
    box-sizing: border-box;
    text-align: center;
    padding: 2px 2px;
    font-size: 11px;
    min-width: 0 !important;

}

/* Preset widths for the five side-by-side cells (total 100%) */
.c-played {
    flex: 0 1 22%;
}

.c-wins {
    flex: 0 1 16%;
}

.c-for {
    flex: 0 1 16%;
}

.c-against {
    flex: 0 1 22%;
}

.c-percent {
    flex: 0 1 24%;
}

.pod_Stats span {
    display: block;
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 2px;
    box-sizing: border-box;
}

.pod_Stats b {
    font-size: 12px;
}

/* Podiums */

.podium-row {
    display: block; /* stacked by default (mobile) */
}

.podium-row > .podium-silver,
.podium-row > .podium-bronze {
margin-bottom: 10px;
}

@media (min-width: 481px) {

.podium-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content:center;
    gap: 30px;

    max-width:630px;
    margin-left:auto;
    margin-right:auto;
        
}

.podium-row > .podium-silver,
.podium-row > .podium-bronze {
    flex:1 1 0;
    min-width: 0; /* lets the stat cells shrink instead of overflowing */
    margin-bottom: 0;
}

.podium-row > .podium-silver
{
   flex-direction:column;
   max-width:300px;
}

.podium-row > podium-bronze {
    flex-direction: column;
    max-width: 300px;
}


}

/* Round Headers */
.POD_RoundLeague {
    margin-top: 10px;
    border: none 1px #00FF00;
    margin-top:30px;
}

.POD_RoundLeague_C
{
    text-align:center;
    font-weight:bold;
    font-size:14pt;
}

.POD_RoundLine {
    text-align: center;
    font-weight: bold;
    font-size: 14pt;
}

.POD_RoundLine_C {
}


/* Stats strip colours, sampled from the mockup */
/*.r1 .pod_Stats {
    background: #fefaee;
}

.r2 .pod_Stats {
    background: #f7f8f9;
}

.r3 .pod_Stats {
    background: #f8f2ef;
}

.rn .pod_Stats {
    background: #f7f8f9;
}*/