@charset "utf-8";

.slot-container {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 2rem;
	border-radius: 1rem;
}

.reel-container {
    width: 100px; 
    height: 100px;
    background-color: var(--bs-body-bg); 
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden; 
    position: relative;
}

.reel {
    position: absolute; 
    width: 100%;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    top: 0;
    transition: top 0.1s linear;
}

.reel.spinning { transition: none; }

.symbol {
	width: 100px; height: 100px;
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
}


.history-symbol { font-size: 20px; }

@media (max-width: 991.98px) {
	.slot-container {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 2rem;
	border-radius: 1rem;
	}
	.reel-container {
		width: 60px; 
		height: 60px;
	}
    .symbol {
        width: 60px; height: 60px;
    }
}