:root {
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --btn-gradient-top: #42aaff;
    --btn-gradient-bot: #0075eb;
    --btn-border-gold: #ffcc00;
    --btn-border-dark: #cc8800;
    --text-stroke: #002d5e;
}

body {
    margin: 0; padding: 0; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    font-family: var(--font-ui); overflow: hidden;
    background: url('chickenslot.jpg') no-repeat center center fixed; 
    background-size: cover; background-color: #87CEEB;
    perspective: 1200px;
}

/* --- CUSTOM DROPDOWN --- */
.custom-dropdown-container {
    position: relative;
    margin-top: 50px;
    z-index: 100;
    width: 280px;
    -webkit-tap-highlight-color: transparent;
}

/* THE TRIGGER */
.dropdown-trigger {
    background: linear-gradient(to bottom, var(--btn-gradient-top) 0%, var(--btn-gradient-bot) 100%);
    border: 3px solid var(--btn-border-gold);
    border-radius: 30px;
    box-shadow: 0 4px 0 var(--btn-border-dark), 0 8px 10px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.4);
    padding: 12px 20px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    
    color: white; font-weight: 900; font-size: 1rem;
    text-shadow: 1.5px 1.5px 0 var(--text-stroke);
    -webkit-text-stroke: 0.5px var(--text-stroke);
}

/* HOVER EFFECT: Dropdown Trigger */
@media (hover: hover) {
    .dropdown-trigger:hover {
        transform: translateY(-3px); /* Lift up */
        box-shadow: 0 7px 0 var(--btn-border-dark), 0 15px 20px rgba(0,0,0,0.4), inset 0 2px 5px rgba(255,255,255,0.5);
        filter: brightness(1.1); /* Make brighter */
    }
}

.dropdown-trigger:active {
    transform: translateY(2px) !important; /* Force down on click */
    box-shadow: 0 2px 0 var(--btn-border-dark) !important;
    filter: brightness(0.9);
}

.arrow-icon {
    color: #ffd700; text-shadow: 1px 1px 0 #cc8800; font-size: 0.8rem;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.custom-dropdown-container.active .arrow-icon { transform: rotate(180deg); }

/* THE OPTIONS LIST */
.dropdown-options {
    position: absolute; top: 115%; left: 0; width: 100%;
    background: #0060c0;
    border: 3px solid var(--btn-border-gold);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transform: translateY(-15px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.custom-dropdown-container.active .dropdown-options {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.option {
    padding: 12px 15px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: white; font-weight: 700; font-size: 0.95rem; text-align: center;
    transition: all 0.2s ease;
}
.option:last-child { border-bottom: none; }

/* HOVER EFFECT: Options */
@media (hover: hover) {
    .option:hover {
        background: rgba(255,255,255,0.2);
        padding-left: 20px; /* Slight slide right */
        padding-right: 10px;
        color: #ffd700; /* Gold text on hover */
    }
}

.option.selected { background: #ffd700; color: #00428a; }

/* --- COIN & WRAPPER --- */
.coin-wrapper {
    position: absolute; top: 55%; left: 50%;
    transform: translate(-50%, -50%);
    width: 180px; height: 180px;
    z-index: 5; overflow: visible; transform-style: preserve-3d;
}

.coin-float { animation: idleFloat 4s ease-in-out infinite; }
@keyframes idleFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotateY(0deg); }
    50% { transform: translate(-50%, -50%) translateY(-15px) rotateY(10deg); }
}

.coin { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.coin-layer {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    background-image: url('coin.png'); background-size: contain;
    background-repeat: no-repeat; background-position: center; image-rendering: pixelated; 
}
.layer-front { transform: translateZ(10px); }
.layer-back { transform: translateZ(-10px) rotateY(180deg); }
.layer-edge { filter: brightness(0.7) sepia(1) hue-rotate(-15deg) saturate(2) contrast(1.2); }

.coin-shadow {
    position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 20px; background: rgba(0,0,0,0.4); border-radius: 50%;
    filter: blur(8px); z-index: -1; opacity: 0.7;
}

/* ANIMATIONS */
@keyframes flipTossSuperSmooth {
    0% { transform: rotateY(0deg) translateY(0) scale(1); }
    40% { transform: rotateY(720deg) translateY(-100px) scale(1.4); } 
    100% { transform: rotateY(1080deg) translateY(0) scale(1); } 
}
@keyframes shadowBreathing {
    0% { opacity: 0.7; transform: translateX(-50%) scale(1); filter: blur(8px); }
    40% { opacity: 0.3; transform: translateX(-50%) scale(0.5); filter: blur(15px); }
    100% { opacity: 0.7; transform: translateX(-50%) scale(1); filter: blur(8px); }
}

/* RESULT TEXT */
.result-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) translateZ(45px) scale(0);
    font-family: var(--font-ui); font-weight: 900;
    color: #FFD700; 
    text-shadow: 2.5px 2.5px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000;
    opacity: 0; pointer-events: none; z-index: 200; white-space: nowrap;
}
.result-text.high-tier { color: #ff4444; text-shadow: 2.5px 2.5px 0 #300, -1.5px -1.5px 0 #300, 0 0 20px #ff0000; }
.result-text.show { animation: textPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes textPop {
    0% { opacity: 0; transform: translate(-50%, -50%) translateZ(45px) scale(0) rotate(-15deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateZ(45px) scale(1) rotate(0deg); }
}

/* PARTICLES */
.particle {
    position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
    background: #fff; box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700;
    border-radius: 50%; pointer-events: none; opacity: 0; margin-left: -6px; margin-top: -6px;
    transform-style: preserve-3d;
}
@keyframes particleFly {
    0% { transform: translate3d(0, 0, 30px) scale(1); opacity: 1; }
    100% { transform: translate3d(var(--tx), var(--ty), 30px) scale(0); opacity: 0; }
}

.flash-burst {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(20px);
    width: 20px; height: 20px; background: radial-gradient(circle, #ffffff 0%, rgba(255,215,0,0) 70%);
    border-radius: 50%; opacity: 0; pointer-events: none;
}
.flash-burst.active { animation: flashExpand 0.4s ease-out forwards; }
@keyframes flashExpand { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 400px; height: 400px; opacity: 0; } }

/* --- MAIN BUTTON --- */
.action-btn {
    margin-bottom: 30px; width: 90%; max-width: 380px; height: 80px;
    background: linear-gradient(to bottom, var(--btn-gradient-top) 0%, var(--btn-gradient-bot) 100%);
    border: 5px solid var(--btn-border-gold); border-radius: 40px;
    box-shadow: 0 8px 0 var(--btn-border-dark), 0 15px 20px rgba(0,0,0,0.4), inset 0 4px 10px rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center; gap: 15px;
    cursor: pointer; z-index: 20; position: relative; overflow: hidden;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    -webkit-tap-highlight-color: transparent;
}

/* HOVER EFFECT: Main Button */
@media (hover: hover) {
    .action-btn:hover {
        transform: translateY(-4px) scale(1.02); /* Lift up & Scale */
        box-shadow: 0 12px 0 var(--btn-border-dark), 0 20px 30px rgba(0,0,0,0.5), inset 0 4px 10px rgba(255,255,255,0.5);
        filter: brightness(1.1); /* Glow */
    }
}

.action-btn:active {
    transform: translateY(6px) !important; /* Force press down */
    box-shadow: 0 2px 0 var(--btn-border-dark) !important;
    filter: brightness(0.9);
}

.action-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); animation: btnShine 4s infinite;
}
@keyframes btnShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.dice-icon { font-size: 2.5rem; background: #ffd700; color: #cc8800; border: 2px solid #b8860b; border-radius: 10px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }
.btn-text { display: flex; flex-direction: column; align-items: flex-start; }
.btn-title { font-family: var(--font-ui); font-weight: 900; font-size: 1.5rem; color: white; text-transform: uppercase; line-height: 1; -webkit-text-stroke: 1px var(--text-stroke); text-shadow: 2px 2px 0 var(--text-stroke); }
.btn-subtitle { font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; color: #ffeb3b; text-transform: uppercase; -webkit-text-stroke: 0.5px var(--text-stroke); text-shadow: 1px 1px 0 var(--text-stroke); }