.field-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    background-color: #2d8a4e;
    border-radius: 10px 10px 50% 50%;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #fff;
}
.infield-dirt {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 50%;
    aspect-ratio: 1;
    background-color: #c48b5d;
    border: 2px solid #fff;
}

.base {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #fff;
    z-index: 5;
}
.base-home { bottom: -8px; right: -8px; clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); transform: rotate(-45deg); }
.base-1 { top: -8px; right: -8px; transform: rotate(-45deg); }
.base-2 { top: -8px; left: -8px; transform: rotate(-45deg); }
.base-3 { bottom: -8px; left: -8px; transform: rotate(-45deg); }

.player-dot {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.runner-1b { bottom: 27%; right: 27%; }
.runner-2b { bottom: 53%; left: 50%; }
.runner-3b { bottom: 27%; left: 27%; }

.pos-1 { bottom: 35%; left: 50%; }
.pos-2 { bottom: 8%; left: 50%; }
.pos-3 { bottom: 25%; right: 23%; }
.pos-4 { bottom: 42%; right: 35%; }
.pos-5 { bottom: 25%; left: 23%; }
.pos-6 { bottom: 42%; left: 35%; }
.pos-7 { bottom: 70%; left: 20%; }
.pos-8 { bottom: 75%; left: 50%; }
.pos-9 { bottom: 70%; right: 20%; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }