:root{
    --bg-top:#0a0a2a;
    --bg-bottom:#1a1a4a;
    --accent:#ff3366;
    --accent-dark:#ff0066;
    --accent-glow:#ff66aa;
    --fruit-glow:#ffaa00;
    --font-main:'Press Start 2P',cursive;
    --font-secondary:'Orbitron',sans-serif;
    --pixel-border:#00ffff;
    --pixel-glow:#00ffaa;
}
*{box-sizing:border-box;margin:0;padding:0;image-rendering:pixelated;}
html,body{height:100%;font-family:var(--font-main);font-size:12px;background:#000;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-smooth:never;}
body{
    background:
        radial-gradient(circle at 20% 80%,#0a0a2a 0%,transparent 50%),
        radial-gradient(circle at 80% 20%,#1a1a4a 0%,transparent 50%),
        linear-gradient(135deg,var(--bg-top),var(--bg-bottom));
    background-size:cover,cover,400% 400%;
    animation:gradientShift 15s ease infinite;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow-x:hidden;
    min-height:100vh;
}
@keyframes gradientShift{
    0%{background-position:0% 50%,0% 0%,0% 50%}
    50%{background-position:100% 50%,100% 100%,100% 50%}
    100%{background-position:0% 50%,0% 0%,0% 50%}
}
#app{
    width:100%;max-width:1100px;margin:auto;display:flex;flex-direction:column;height:100%;padding:10px;
    border:4px solid var(--pixel-border);
    border-image:repeating-linear-gradient(45deg,var(--pixel-border),var(--pixel-glow)10px)4;
    background:rgba(0,0,20,0.8);
    box-shadow:0 0 30px rgba(0,255,255,0.3),inset 0 0 30px rgba(0,255,255,0.1);
    position:relative;overflow:hidden;
}
#app::before{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background:linear-gradient(90deg,transparent,rgba(0,255,255,0.03),transparent);
    background-size:20px 20px;pointer-events:none;z-index:0;
}
#app>*{position:relative;z-index:1}
header{
    padding:15px;background:linear-gradient(180deg,rgba(0,20,40,0.9),rgba(0,10,30,0.9));
    text-align:center;border-bottom:3px solid var(--pixel-border);
    text-shadow:2px 2px 0 #000,0 0 10px var(--fruit-glow);margin-bottom:5px;
}
header h1{
    font-size:2.2rem;color:#ffaa00;margin-bottom:15px;letter-spacing:2px;text-transform:uppercase;
    animation:textGlow 2s ease-in-out infinite alternate;
}
@keyframes textGlow{
    from{text-shadow:2px 2px 0 #000,0 0 10px var(--fruit-glow),0 0 20px #ffaa00;}
    to{text-shadow:2px 2px 0 #000,0 0 15px #ff6600,0 0 25px #ff3300;}
}
#playerInfo{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;font-size:0.9rem;font-family:var(--font-secondary);
    align-items:center;justify-items:center;
}
#playerInfo span{
    background:rgba(0,20,40,0.8);padding:8px 12px;border-radius:4px;
    border:2px solid #00aaff;min-width:150px;display:flex;
    justify-content:space-between;align-items:center;
    box-shadow:0 0 8px rgba(0,170,255,0.3);line-height:1.5;
}
#playerInfo strong{color:#00ffff;font-size:1.1rem;text-shadow:0 0 5px #00ffff;}
.small-btn{
    padding:5px 10px;font-size:0.8rem;background:linear-gradient(180deg,#00cc66,#009944);
    border:none;border-radius:0;border:2px solid #00ff88;color:#fff;
    cursor:pointer;font-family:var(--font-main);text-shadow:1px 1px 0 #000;transition:all .1s;
}
.small-btn:hover{
    background:linear-gradient(180deg,#00ff88,#00cc66);transform:translateY(-2px);
    box-shadow:0 0 10px #00ff88;
}
nav{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    padding:10px;background:rgba(0,10,30,0.8);
    border-bottom:2px solid var(--pixel-border);margin-bottom:10px;
}
button{
    font-family:var(--font-main);font-weight:400;font-size:0.8rem;
    text-transform:uppercase;background:linear-gradient(180deg,#333366,#222244);
    color:#fff;padding:10px 15px;border:none;border-radius:0;
    border:2px solid #6666ff;cursor:pointer;
    box-shadow:inset 0 0 10px rgba(102,102,255,0.3),0 4px 0 #000066;
    text-shadow:1px 1px 0 #000;transition:all .1s;position:relative;overflow:hidden;
}
button::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#6666ff;}
button:hover{
    background:linear-gradient(180deg,#444477,#333366);
    transform:translateY(-2px);
    box-shadow:inset 0 0 15px rgba(102,102,255,0.5),0 6px 0 #000066;
}
button:active{
    transform:translateY(2px);
    box-shadow:inset 0 0 10px rgba(102,102,255,0.3),0 2px 0 #000066;
}
button:focus{outline:2px solid #00ffff;}
button:disabled{
    background:#222;color:#666;border-color:#444;box-shadow:none;transform:none;cursor:not-allowed;
}
.screen{
    display:none;flex-direction:column;align-items:center;
    overflow:auto;padding:15px;background:rgba(0,5,15,0.6);
    border:2px solid #3366ff;margin:5px;
    border-image:repeating-linear-gradient(45deg,transparent,transparent 5px,#3366ff 5px,#3366ff 10px)2;
    line-height:1.5;
}
.screen.active{display:flex;}
.screen h2{
    color:#ffaa00;font-size:1.5rem;margin-bottom:15px;
    text-align:center;text-shadow:2px 2px 0 #000;
    border-bottom:2px solid #ffaa00;padding-bottom:5px;width:100%;
}
#message{
    margin-top:15px;min-height:1.8rem;font-size:1rem;text-align:center;
    padding:8px;background:rgba(0,0,0,0.5);border:2px solid #ff3366;width:90%;font-family:var(--font-main);
}
#slotMachine{
    display:flex;justify-content:center;gap:10px;margin:20px 0;
    padding:15px;border:4px solid #ffaa00;background:linear-gradient(180deg,#111122,#000011);
    border-image:repeating-linear-gradient(45deg,#ffaa00,#ff6600 10px)4;
    position:relative;box-shadow:0 0 30px rgba(255,170,0,0.4),inset 0 0 30px rgba(255,170,0,0.2);
    width:100%;height:400px;align-items:center;
}
.reel{
    width:128px;height:384px;background:#000;border:3px solid #ffaa00;
    box-shadow:inset 0 0 20px rgba(255,170,0,0.3),0 0 10px rgba(255,170,0,0.5);
    transition:all .3s;overflow:hidden;
}
.reel canvas{width:128px;height:384px;image-rendering:pixelated;}
.reel.spinning{
    box-shadow:inset 0 0 30px rgba(255,51,102,0.5),0 0 20px #ff3366;
    animation:reelSpin .1s linear infinite;
}
@keyframes reelSpin{
    0%{border-color:#ffaa00;}
    50%{border-color:#ff3366;}
    100%{border-color:#ffaa00;}
}
#betContainer{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;justify-content:center;
}
.bet-preset{
    background:#002244;color:#aaffff;border:2px solid #0088ff;
    padding:8px 15px;border-radius:0;font-size:1rem;cursor:pointer;
    font-family:var(--font-main);transition:all .1s;text-shadow:1px 1px 0 #000;
}
.bet-preset:hover{
    background:#003366;transform:translateY(-2px);box-shadow:0 0 10px #0088ff;
}
.bet-preset.active{
    background:#ffaa00;color:#000;border-color:#ff6600;box-shadow:0 0 15px #ffaa00;
}
#controls{
    margin-top:20px;display:flex;justify-content:center;gap:15px;
}
.spin-btn{
    padding:15px 30px;font-size:1.2rem;background:linear-gradient(180deg,#ffaa00,#cc8800);
    color:#000;border:none;border-radius:0;border:3px solid #ffcc00;cursor:pointer;
    font-family:var(--font-main);text-transform:uppercase;text-shadow:1px 1px 0 #fff;
    letter-spacing:1px;box-shadow:inset 0 0 20px rgba(255,204,0,0.5),0 6px 0 #884400;
    transition:all .1s;position:relative;
}
.spin-btn:hover{
    background:linear-gradient(180deg,#ffcc00,#ffaa00);transform:translateY(-3px);
    box-shadow:inset 0 0 25px rgba(255,204,0,0.7),0 8px 0 #884400;
}
.spin-btn:active{
    transform:translateY(3px);
    box-shadow:inset 0 0 20px rgba(255,204,0,0.5),0 3px 0 #884400;
}
.auto-btn{
    padding:15px 20px;font-size:1rem;background:linear-gradient(180deg,#336633,#224422);
    color:#fff;border:2px solid #00aa00;
}
.auto-btn.active{
    background:linear-gradient(180deg,#00cc00,#009900);box-shadow:0 0 15px #00ff00;
}
#stats{
    display:flex;flex-wrap:wrap;justify-content:center;gap:15px;
    margin-top:20px;padding:15px;background:rgba(0,20,40,0.6);
    border:2px solid #00aaff;width:90%;
}
.stat-box{
    background:rgba(0,40,80,0.7);padding:10px 15px;border:1px solid #00ffff;
    min-width:150px;text-align:center;
}
.stat-label{display:block;font-size:0.8rem;color:#aaffff;margin-bottom:5px;}
.stat-value{display:block;font-size:1.2rem;color:#00ffff;font-weight:bold;}
#xpBar{
    width:200px;height:15px;background:#002244;border:2px solid #00aaff;
    border-radius:0;overflow:hidden;margin:5px 0;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
}
#xpFill{
    height:100%;background:linear-gradient(90deg,#ffaa00,#ff6600);
    width:0%;transition:width .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 10px #ffaa00;
}
.skill-node{
    background:linear-gradient(180deg,#223344,#112233);
    border-radius:0;padding:12px;text-align:center;cursor:pointer;
    transition:all .2s;position:relative;margin:10px;
    border:2px solid #446688;width:180px;display:inline-block;vertical-align:top;
}
.skill-node:hover{
    border-color:#ffaa00;transform:translateY(-3px);
    box-shadow:0 0 15px rgba(255,170,0,0.5);
}
.skill-node.locked{
    opacity:.6;cursor:not-allowed;filter:grayscale(80%);
}
.skill-node .skill-icon{
    width:64px;height:64px;margin-bottom:8px;
    image-rendering:pixelated;border:2px solid #fff;background:#000;padding:4px;
}
.skill-level{
    font-size:0.7rem;margin-top:5px;color:#aaddff;font-family:var(--font-secondary);
}
.upgrade-item{
    background:linear-gradient(180deg,#334455,#223344);
    border:2px solid #ffaa00;padding:12px;margin:8px;width:280px;
    text-align:center;cursor:pointer;transition:all .2s;
}
.upgrade-item:hover{
    background:linear-gradient(180deg,#445566,#334455);
    transform:translateY(-2px);box-shadow:0 0 10px #ffaa00;
}
.upgrade-item.bought{
    background:linear-gradient(180deg,#228844,#116633);
    border-color:#00ff88;
}
.quest-node,.ach-node{
    background:linear-gradient(180deg,#334455,#223344);
    border-radius:0;padding:10px;margin:8px;width:280px;
    display:flex;justify-content:space-between;align-items:center;
    border:2px solid #557788;font-family:var(--font-secondary);
}
.quest-node.done,.ach-node.done{
    background:linear-gradient(180deg,#228844,#116633);
    border-color:#00ff88;
}
#miniGameArea{
    width:400px;height:300px;background:#000;border:4px solid #00ffff;
    position:relative;margin:20px 0;box-shadow:inset 0 0 30px rgba(0,255,255,0.3);
}
.mini-target{
    position:absolute;width:40px;height:40px;background:#ff3366;
    border-radius:50%;cursor:pointer;border:3px solid #fff;
    box-shadow:0 0 20px #ff3366,inset 0 0 10px rgba(255,255,255,0.5);
    animation:pulse 1s infinite;
}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}
.input-group{
    display:flex;gap:0;margin:10px 0;
}
.input-group button{
    padding:5px 10px;background:#444;border:2px solid #666;
    font-family:var(--font-main);font-size:0.8rem;
}
.input-group input{
    padding:8px;background:#000;border:2px solid #00aaff;
    color:#fff;text-align:center;font-family:var(--font-main);
    font-size:0.9rem;width:80px;
}
#coinAnim{
    position:fixed;bottom:20px;right:20px;font-size:2.5rem;
    animation:coinFly 1s ease-out;text-shadow:0 0 10px #ffd700;z-index:1000;
}
@keyframes coinFly{
    0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1;}
    100%{transform:translateY(-150px) rotate(360deg) scale(0);opacity:0;}
}
.particle{
    position:absolute;width:8px;height:8px;background:#fff;border-radius:0;
    pointer-events:none;animation:particle-fly 600ms forwards;box-shadow:0 0 10px #fff;
}
@keyframes particle-fly{
    from{transform:translate(0,0) scale(1);opacity:1;}
    to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
}
footer{
    margin-top:auto;padding:10px;text-align:center;font-size:0.7rem;
    color:#88aaff;border-top:2px solid #3366ff;background:rgba(0,10,30,0.8);
    font-family:var(--font-secondary);
}
.pixel-corner{
    position:absolute;width:10px;height:10px;background:var(--pixel-border);
}
.pixel-corner.tl{top:-2px;left:-2px;}
.pixel-corner.tr{top:-2px;right:-2px;}
.pixel-corner.bl{bottom:-2px;left:-2px;}
.pixel-corner.br{bottom:-2px;right:-2px;}
.scan-line{
    position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,255,255,0.8),transparent);
    animation:scan 2s linear infinite;pointer-events:none;z-index:2;
}
@keyframes scan{0%{top:0%;}100%{top:100%;}}

/* SETTINGS – sliders */
#volumeControls{margin-top:20px;display:flex;flex-direction:column;gap:18px;}
.slider-wrapper{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 12px;background:rgba(0,20,40,0.6);
    border:2px solid #00aaff;
    border-image:repeating-linear-gradient(45deg,#00aaff,#00aaff 5px,#004444 5px,#004444 10px)2;
    font-family:var(--font-main);
}
.slider-wrapper label{color:#aaffff;font-size:0.9rem;user-select:none;}
.slider-wrapper input[type=range]{
    -webkit-appearance:none;width:150px;height:12px;background:#004444;
    border:2px solid #00aaff;border-radius:0;outline:none;
}
.slider-wrapper input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:16px;height:16px;background:#ffaa00;
    border:2px solid #ff6600;cursor:pointer;
}
.slider-wrapper input[type=range]::-moz-range-thumb{
    width:16px;height:16px;background:#ffaa00;
    border:2px solid #ff6600;cursor:pointer;
}
.slider-wrapper input[type=range]::-webkit-slider-runnable-track{height:8px;background:#004444;}
.slider-wrapper input[type=range]::-moz-range-track{height:8px;background:#004444;}
.slider-value{
    min-width:38px;text-align:right;font-size:0.85rem;color:#aaffff;margin-left:4px;
}

@media (max-width:768px){
    #app{max-width:100%;padding:5px;}
    header h1{font-size:1.5rem;}
    #playerInfo{grid-template-columns:1fr 1fr;}
    .reel{width:80px;height:240px;}
    .reel canvas{width:80px;height:240px;}
    nav button{font-size:0.7rem;padding:8px 10px;}
    .screen h2{font-size:1.2rem;}
    #slotMachine{padding:5px;gap:5px;height:300px;}
}