/* Retro 2000's gamer style: Simplified red/green colors, no glow in log */
:root {
--green: #00ff00;
--dark-green: #003300;
--red: #ff0000;
--dark-red: #330000;
--black: #000;
--gray: #666;
--dark-gray: #333;
--green-tint: rgba(0, 255, 0, 0.1);
--red-tint: rgba(255, 0, 0, 0.1);
--black-overlay: rgba(0, 0, 0, 0.8);
--black-tint: rgba(0, 0, 0, 0.5);
}

html, body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
font-family: 'Courier New', monospace;
background: linear-gradient(to bottom, var(--dark-green), #006600);
color: var(--green);
}

.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
gap: 40px;
background: var(--black-overlay);
}

.left-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 500px;
flex: 1;
background: var(--dark-green);
padding: 10px;
border: 2px dashed var(--green);
}

.right-content {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
position: relative;
border: 2px dashed var(--green);
overflow: hidden;
}

h1 {
color: var(--red);
font-size: 2em;
margin-bottom: 20px;
letter-spacing: 2px;
}

#balance, #house_bank {
font-size: 1.2em;
color: var(--green);
margin-bottom: 10px;
}

.odds {
margin-bottom: 20px;
background: var(--green-tint);
padding: 10px;
border: 1px solid var(--green);
}

.odds p {
margin: 5px 0;
color: var(--green);
}

p input[type="number"] {
padding: 5px;
font-size: 1em;
width: 100px;
border: 2px solid var(--red);
background: var(--black);
color: var(--green);
text-align: center;
}

#bet_amount_display {
cursor: pointer;
font-weight: bold;
color: var(--green);
}

input[type="range"] {
width: 200px;
margin-bottom: 20px;
background: linear-gradient(to right, var(--red), var(--green));
height: 10px;
border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
width: 20px;
height: 20px;
background: var(--green);
border: 2px solid var(--black);
cursor: pointer;
}

.buttons {
display: flex;
gap: 20px;
margin-bottom: 20px;
}

button {
padding: 10px 20px;
font-size: 1em;
background: linear-gradient(to bottom, var(--green), #006600);
color: var(--black);
border: 3px outset var(--green);
border-radius: 0;
cursor: pointer;
font-weight: bold;
}

button:hover {
background: linear-gradient(to bottom, var(--red), #660000);
border: 3px inset var(--red);
}

button.disabled {
background: var(--gray);
border: 3px outset var(--dark-gray);
cursor: not-allowed;
color: var(--dark-gray);
}

#open_store {
margin-bottom: 20px;
}

#result {
color: var(--red);
font-size: 1.1em;
min-height: 20px;
}

.bet-log {
height: 120px;
overflow-y: auto;
margin-top: 20px;
width: 100%;
text-align: left;
font-size: 0.9em;
font-family: 'Courier New', monospace;
background-color: var(--black);
color: #fff;
border: 2px solid var(--dark-gray);
padding: 10px;
border-radius: 0;
box-shadow: 0 0 10px var(--green-tint);
-ms-overflow-style: none;
scrollbar-width: none;
}

.bet-log::-webkit-scrollbar {
display: none;
}

.bet-log p {
margin: 5px 0;
white-space: normal;
word-wrap: break-word;
}

.bet-log p.win {
color: var(--green);
}

.bet-log p.lose {
color: var(--red);
}

/* Coin animation */
#animation_container {
position: relative;
height: 100px;
width: 100px;
perspective: 1000px;
display: none;
}

#coin {
width: 100%;
height: 100%;
transform-style: preserve-3d;
}

#coin.flipping {
animation: coinFlip var(--duration) ease-in-out forwards;
}

@keyframes coinFlip {
0% { transform: rotateY(0); }
100% { transform: rotateY(var(--rotation)); }
}

#coin .front, #coin .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: bold;
color: var(--black);
font-size: 1.2em;
}

#coin .front {
background-color: gold;
}

#coin .back {
background-color: silver;
transform: rotateY(180deg);
}

/* Confetti */
.confetti {
position: absolute;
width: 10px;
height: 10px;
opacity: 0.8;
animation: fall 3s linear forwards;
}

@keyframes fall {
0% { top: -10%; transform: rotate(0); }
100% { top: 110%; transform: rotate(720deg); }
}

/* Store modal */
.store-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--black-overlay);
display: none;
justify-content: center;
align-items: center;
}

.store-content {
background: var(--dark-green);
padding: 20px;
border: 2px solid var(--green);
text-align: left;
color: var(--green);
width: 450px;
max-height: 80vh;
overflow-y: auto;
}

.store-content button {
margin-top: 10px;
padding: 5px 15px;
font-size: 0.9em;
width: 80px;
text-align: center;
}

.store-content .greyed {
color: var(--gray);
}

.store-item {
display: flex;
align-items: center;
margin: 10px 0;
padding: 10px;
background: var(--green-tint);
border: 1px dashed var(--green);
gap: 15px;
}

.store-item.greyed {
color: var(--gray);
background: var(--black-tint);
border-color: var(--dark-gray);
}

.store-preview {
width: 40px;
height: 40px;
position: relative;
perspective: 1000px;
flex-shrink: 0;
}

.store-coin {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateY(0deg);
}

.store-front, .store-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #5c5c5c;
font-size: 0.7em;
border: 1px solid var(--black);
}

.store-back {
transform: rotateY(180deg);
}

.store-name {
flex: 1;
display: flex;
flex-direction: column;
}

.store-name p {
margin: 0;
font-size: 1em;
font-weight: bold;
}

.store-boost {
font-size: 0.7em;
color: #15ff00;
margin-top: 2px;
}

.store-price {
margin: 0;
font-size: 1em;
width: 60px;
text-align: right;
}

.store-owned {
color: var(--green);
font-size: 0.9em;
width: 80px;
text-align: center;
}

.store-item:hover:not(.greyed):not(button:disabled) {
background: var(--red-tint);
border-color: var(--red);
}

/* Login Modal */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex; /* Shown by default */
    justify-content: center;
    align-items: center;
}

.login-content {
    background: var(--dark-green);
    padding: 20px;
    border: 2px solid var(--green);
    text-align: center;
    color: var(--green);
    width: 300px;
}

.login-content input {
    display: block;
    margin: 10px auto;
    padding: 5px;
    width: 80%;
    background: var(--black);
    color: var(--green);
    border: 2px solid var(--red);
}

.auth-buttons {
    display: flex;
    justify-content: space-around;
}

/* Bank Modal */
.bank-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.bank-content {
    background: var(--dark-green);
    padding: 20px;
    border: 2px solid var(--green);
    text-align: center;
    color: var(--green);
    width: 300px;
}

.bank-content input {
    display: block;
    margin: 10px auto;
    padding: 5px;
    width: 80%;
    background: var(--black);
    color: var(--green);
    border: 2px solid var(--red);
}

/* Logout Button */
#logout_btn {
    margin-top: 20px;
    background: linear-gradient(to bottom, var(--red), #660000);
    border: 3px outset var(--red);
    color: var(--black);
}

#logout_btn:hover {
    background: linear-gradient(to bottom, var(--green), #006600);
    border: 3px inset var(--green);
}

/* Bank Button and Display */
#bank_button {
    margin-bottom: 10px;
}

#bank_balance {
    font-size: 1.2em;
    color: var(--green);
    margin-bottom: 10px;
}