:root {
    --dark-bg: #0f0f11;
    --panel-bg: #1c1d21;
    --panel-light: #2a2b2e;
    --green: #cbfb45;
}

* { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Prevent double-tap zoom on mobile */
button, input, a {
    touch-action: manipulation;
}

body {
    margin: 0; background-color: var(--dark-bg); color: white;
}

/* Login */
.overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95); display: flex; justify-content: center; align-items: center; z-index: 100;
}
.login-box {
    background: var(--panel-bg); padding: 2.5rem 1.5rem; border-radius: 16px; text-align: center; width: 90%; max-width: 400px;
}
.login-box input {
    width: 100%; padding: 1rem; font-size: 1.2rem; background: var(--panel-light); border: none; color: white; border-radius: 8px; margin-bottom: 1rem; text-align: center;
}
.btn-enter {
    width: 100%; padding: 1rem; font-size: 1.2rem; background: var(--green); color: black; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
}

/* Header */
header { display: flex; justify-content: space-between; padding: 1.5rem; align-items: center; }
.balance-container { font-size: 1.2rem; font-weight: bold; }
.icon-btn { background: transparent; border: none; color: #888; font-size: 1.5rem; cursor: pointer; }

/* 3D Coin */
.coin-container { height: 250px; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
.coin {
    width: 140px; height: 140px; position: relative;
    transform-style: preserve-3d; transition: transform 2.5s cubic-bezier(0.1, 0.7, 0.1, 1);
}
.coin-face {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem; font-weight: 900; text-transform: uppercase; backface-visibility: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.coin-face.front { background: radial-gradient(circle at 30% 30%, #fde047, #ca8a04); color: #452e00; }
.coin-face.back { background: radial-gradient(circle at 30% 30%, #f3f4f6, #9ca3af); color: #1f2937; transform: rotateY(180deg); }

/* Panels */
.mode-container { display: flex; justify-content: space-between; background: var(--panel-bg); margin: 0 1rem; padding: 0.8rem; border-radius: 12px; align-items: center; }
.payout-info { display: flex; justify-content: space-between; flex: 1; margin-right: 1rem; }
.info-block { display: flex; flex-direction: column; }
.info-block.right { text-align: right; }
.info-block .label { color: #888; font-size: 0.85rem; }
.info-block .value { font-size: 1.2rem; font-weight: bold; }

.multipliers-list { display: flex; gap: 0.4rem; overflow-x: auto; flex: 1; margin-right: 1rem; }
.mult-box { background: var(--panel-light); padding: 0.6rem; border-radius: 8px; color: #666; font-size: 0.9rem; white-space: nowrap; transition: 0.3s; }
.mult-box.active { background: var(--panel-light); color: white; box-shadow: inset 0 0 0 1px #fff; }
.mult-box .icon { background: #444; border-radius: 50%; width: 16px; height: 16px; display: inline-block; text-align: center; font-size: 0.7rem; color: #aaa; margin-right: 4px; }

/* Switch */
.series-toggle-box { display: flex; align-items: center; gap: 0.5rem; font-weight: bold; }
.switch { position: relative; display: inline-block; width: 40px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--green); }
input:checked + .slider:before { transform: translateX(16px); background-color: black; }

/* Betting UI */
.betting-panel { background: var(--panel-bg); margin: 1rem; padding: 1rem; border-radius: 16px; display: flex; flex-direction: column; gap: 0.6rem; }
.bet-amount-row { background: var(--panel-light); padding: 1rem; border-radius: 10px; display: flex; align-items: center; }

/* Typing Input Styles */
.currency-input {
    background: transparent; border: none; color: white; font-size: 1.3rem; font-weight: bold; flex: 1; width: 100%; outline: none; -moz-appearance: textfield;
}
.currency-input::-webkit-outer-spin-button,
.currency-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.currency-sym { font-size: 1.3rem; color: #888; margin-right: auto; padding-right: 1rem; }
.plus-min button { background: none; border: none; color: white; font-size: 1.5rem; width: 40px; cursor: pointer; }

.bet-modifiers { display: flex; gap: 0.6rem; }
.bet-modifiers button { flex: 1; background: var(--panel-light); border: none; padding: 1rem; border-radius: 10px; color: #aaa; font-size: 1rem; cursor: pointer; }

.action-buttons { display: flex; gap: 0.6rem; }
.btn-heads { flex: 1; background: linear-gradient(180deg, #fceabb, #f8b500); border: none; padding: 1.2rem; border-radius: 10px; font-weight: bold; font-size: 1.1rem; color: black; cursor: pointer; }
.btn-tails { flex: 1; background: linear-gradient(180deg, #e0eafc, #cfdef3); border: none; padding: 1.2rem; border-radius: 10px; font-weight: bold; font-size: 1.1rem; color: black; cursor: pointer; }

.btn-withdraw { width: calc(100% - 2rem); margin: 0 1rem; background: var(--panel-bg); color: #888; border: none; padding: 1.2rem; border-radius: 12px; font-size: 1rem; cursor: pointer; transition: 0.3s; }
.btn-withdraw.active { background: #1e3f20; color: #4caf50; font-weight: bold; }

/* Green Last Win style */
.btn-withdraw.last-win { color: #4caf50; }