body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1a1a2e;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 390px;
    height: 844px;
    background: #1a1a2e;
    box-sizing: border-box;
    overflow: hidden;
}

#peg-container {
    position: absolute;
    top: 0;
    left: -6px;
    width: 390px;
    height: 844px;
    z-index: 1;
}

#ball-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 844px;
    z-index: 1;
}

.ball {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff0000;
    border-radius: 50%;
    display: none;
}

.peg {
    position: absolute;
    width: 5.5px;
    height: 5.5px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
    z-index: 5;
}

#slots {
    position: absolute;
    top: 405px;
    width: 390px;
    height: 20px;
    display: flex;
    justify-content: center;
    background: transparent;
    gap: 3.5px;
    z-index: 2;
}

.slot {
    flex: 0 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 9px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    box-sizing: border-box;
    border-radius: 4px;
    transition: box-shadow 0.3s ease;
    padding: 0;
    margin: 0;
}

.slot sup,
.prize-item sup {
    font-size: 6px;
    vertical-align: super;
    position: relative;
    top: -2px;
}

.slot[data-multiplier="0"] { background-color: rgb(255, 192, 0); }
.slot[data-multiplier="1"] { background-color: rgb(255, 168, 8); }
.slot[data-multiplier="1.5"] { background-color: rgb(255, 144, 16); }
.slot[data-multiplier="2"] { background-color: rgb(255, 120, 24); }
.slot[data-multiplier="3"] { background-color: rgb(255, 96, 32); }
.slot[data-multiplier="3.5"] { background-color: rgb(255, 72, 39); }
.slot[data-multiplier="4"] { background-color: rgb(255, 48, 47); }
.slot[data-multiplier="5"] { background-color: rgb(255, 0, 63); }

.slot.glow {
    animation: glow 1s ease-in-out 2;
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 255, 255, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
}

#prizes {
    position: absolute;
    top: 42px;
    right: 0;
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    padding: 0;
    opacity: 0.8;
    z-index: 3;
}

.prize-item {
    background: #3a3a4e;
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 4px;
    text-align: center;
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    color: #000;
}

.prize-item[data-multiplier="3.5"],
.prize-item[data-multiplier="4"],
.prize-item[data-multiplier="5"] {
    background: #ff0000;
}

.prize-item[data-multiplier="2"],
.prize-item[data-multiplier="3"] {
    background: #FE5E21;
}

.prize-item[data-multiplier="0"],
.prize-item[data-multiplier="1"],
.prize-item[data-multiplier="1.5"] {
    background: #f3c21f;
}

#controls-wrapper {
    position: absolute;
    top: 435px;
    width: 390px;
    height: 409px;
    overflow-y: auto;
    z-index: 3;
}

#controls {
    position: relative;
    width: 340px;
    padding: 12px;
    background: #1a1a2e;
    box-sizing: border-box;
    margin: 0 auto;
}

.control-group {
    margin-bottom: 8px;
}

.control-group label {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.balls-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.currency-symbol {
    position: absolute;
    left: 12px;
    color: #ffffff;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
}

.control-group input,
.control-group select {
    width: 100%;
    padding: 8px;
    background: #2a2a3e;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
}

.control-group input[readonly] {
    background: #2a2a3e;
    cursor: default;
}

.control-group input {
    padding-left: 31px;
}

.control-group select {
    appearance: none;
    background: #2a2a3e url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 12px center;
    padding-right: 31px;
    z-index: 4;
}

.counter-button {
    width: 40px;
    height: 32px;
    background: #3a3a4e;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    cursor: poNunito;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.counter-button:hover {
    background: #4a4a5e;
}

.counter-button:disabled {
    background: #2a2a3e;
    color: #666;
    cursor: not-allowed;
}