/* Roleta Jotape44K x DRINKISS */
:root{--bg:#0a0a0f;--surface:rgba(15,17,28,.82);--surface-solid:#0f111c;--text:#f1f5f9;--text-muted:#94a3b8;--accent:#E54065;--accent2:#FFC907;--accent-glow:rgba(229,64,101,.35);--border:rgba(255,255,255,.08);--border-hover:rgba(255,255,255,.15);--radius:16px;--radius-sm:10px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
.hidden{display:none!important}

/* LOGIN */
#login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#particles-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.login-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:3rem;text-align:center;width:440px;max-width:90vw;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px var(--accent-glow);backdrop-filter:blur(20px)}
.login-logo-img{margin-bottom:.8rem}
.drinkiss-logo-text{font-family:'Bungee',cursive;font-size:2.6rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:3px}
.login-divider{width:60px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));margin:1rem auto;border-radius:2px}
.login-title{font-family:'Bungee',cursive;font-size:2rem;color:var(--text);-webkit-text-fill-color:var(--text);margin-bottom:.4rem;letter-spacing:1px}
.login-subtitle{color:var(--text-muted);font-size:.95rem;margin-bottom:1.8rem}
.input-group{display:flex;flex-direction:column;gap:.75rem}
.input-group input{background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:12px;padding:1rem 1.5rem;color:var(--text);font-size:1rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .25s,box-shadow .25s}
.input-group input:focus{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
.btn-login{display:flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:1rem;padding:1rem 2rem;border-radius:12px;cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 25px var(--accent-glow)}
.login-error{color:#f87171;font-size:.9rem;margin-top:1rem;animation:shake .4s ease}
.login-sponsor{margin-top:2rem;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.sponsor-brand{font-family:'Bungee',cursive;font-size:.9rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shimmer{to{background-position:300% center}}

/* LAYOUT */
.container{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100vh;position:relative}
#particles-app{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* SPONSOR BAR */
.sponsor-bar{width:100%;background:rgba(10,10,15,.9);border-bottom:1px solid var(--border);z-index:20;backdrop-filter:blur(10px);flex-shrink:0}
.sponsor-bar-inner{display:flex;align-items:center;justify-content:center;gap:2rem;padding:.6rem 2rem}
.sponsor-tag{display:flex;align-items:center;gap:.4rem}
.sponsor-tag-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.sponsor-tag-brand{font-family:'Bungee',cursive;font-size:1rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sponsor-tagline{font-size:.7rem;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase}
.sponsor-link{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--accent2);text-decoration:none;font-weight:600;transition:color .2s}
.sponsor-link:hover{color:var(--accent)}

/* MAIN CONTENT */
.sponsor-bar{grid-column:1/-1;grid-row:1}

/* SIDEBAR */
.sidebar{position:relative;width:320px;min-width:320px;background:var(--surface);display:flex;flex-direction:column;z-index:10;transition:width .35s cubic-bezier(.4,0,.2,1),min-width .35s cubic-bezier(.4,0,.2,1);border-right:1px solid var(--border)}
.sidebar.collapsed{width:0;min-width:0;padding:0;overflow:hidden;border:none}
.sidebar.collapsed .sidebar-inner{opacity:0;pointer-events:none}
.sidebar-inner{padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.2rem;height:100%;opacity:1;transition:opacity .2s;overflow-y:auto}
.sidebar-toggle{position:absolute;top:50%;right:-16px;transform:translateY(-50%);width:32px;height:48px;background:var(--surface-solid);border:1px solid var(--border);border-radius:0 10px 10px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);z-index:20;transition:color .25s,border-color .25s}
.sidebar-toggle:hover{color:var(--accent);border-color:var(--accent)}
.sidebar-header h2{font-size:1.2rem;font-weight:700;margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.sidebar-header h2 svg{color:var(--accent)}
.sidebar-header p{font-size:.85rem;color:var(--text-muted)}
.theme-selector{display:flex;flex-direction:column;gap:.5rem}
.theme-selector label{font-size:.8rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.theme-options{display:flex;gap:.8rem}
.theme-btn{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:opacity .2s,transform .2s,border-color .2s;opacity:.6}
.theme-btn:hover{opacity:1;transform:scale(1.1)}
.theme-btn.active{opacity:1;border-color:#fff;transform:scale(1.1);box-shadow:0 0 10px rgba(255,255,255,.3)}
#options-input{flex:1;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;color:var(--text);font-family:'Inter',sans-serif;font-size:.9rem;resize:none;outline:none;transition:border-color .25s,box-shadow .25s}
#options-input:focus{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}
.sidebar-actions{display:flex;flex-direction:column;gap:.6rem}

/* BUTTONS */
.btn{padding:.85rem 1.4rem;border:none;border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;letter-spacing:.3px}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 15px var(--accent-glow)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
.btn.ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.btn.ghost:hover{color:var(--text);border-color:var(--border-hover);background:rgba(255,255,255,.03)}

/* WHEEL SECTION */
.wheel-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:5;overflow:hidden;padding:1rem}
.main-header{text-align:center;z-index:10;margin-bottom:.5rem}
.main-title{font-size:2.2rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.6rem;user-select:none;flex-wrap:wrap}
.title-jotape{font-family:'Bungee',cursive;color:var(--text)}
.title-separator{color:var(--text-muted);font-weight:300;font-size:1.5rem}
.title-drinkiss{font-family:'Bungee',cursive;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.main-subtitle{font-size:.75rem;color:var(--text-muted);letter-spacing:5px;text-transform:uppercase;margin-top:.3rem}

/* WHEEL */
.wheel-container{position:relative;width:560px;height:560px;display:flex;align-items:center;justify-content:center;contain:layout paint}
.wheel-glow{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);opacity:.4;animation:pulse-glow 3s ease-in-out infinite;pointer-events:none;will-change:transform,opacity}
@keyframes pulse-glow{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.08);opacity:.5}}
.is-spinning .wheel-glow{animation-play-state:paused}
#wheel-canvas{position:absolute;width:100%;height:100%;border-radius:50%;z-index:1;will-change:transform}

/* POINTER */
.wheel-pointer{position:absolute;top:50%;right:-20px;transform:translateY(-50%);z-index:5;width:50px;height:50px;filter:drop-shadow(-3px 2px 6px rgba(0,0,0,.6));transform-origin:right center}
.wheel-pointer::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent2),var(--accent));clip-path:polygon(0% 50%,100% 0%,100% 100%);border-radius:3px}
.wheel-pointer::after{content:'';position:absolute;right:5px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 0 6px rgba(255,255,255,.5)}
@keyframes pinBounce{0%{transform:translateY(-50%) rotate(0)}40%{transform:translateY(-50%) rotate(-20deg)}100%{transform:translateY(-50%) rotate(0)}}
.wheel-pointer.tick-anim{animation:pinBounce .1s ease-out}

/* CENTER BUTTON */
.wheel-center{position:absolute;width:88px;height:88px;background:linear-gradient(145deg,#fff,#e0e0e0);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.8);z-index:10;border:4px solid rgba(255,255,255,.3);transition:transform .2s,box-shadow .2s}
.wheel-center span{color:#1a1a2e;font-weight:800;font-size:.95rem;letter-spacing:2px;font-family:'Inter',sans-serif}
.wheel-center:hover{transform:scale(1.08);box-shadow:0 0 30px var(--accent-glow),inset 0 2px 4px rgba(255,255,255,.8)}
.wheel-center:active{transform:scale(.94)}

/* RESULT MODAL */
#result-display{position:fixed;inset:0;background:rgba(7,7,13,.92);display:flex;align-items:center;justify-content:center;z-index:100;opacity:1;transition:opacity .3s}
#result-display.hidden{opacity:0;pointer-events:none}
.result-content{background:var(--surface-solid);padding:3rem 3.5rem;border-radius:24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px var(--accent-glow);border:1px solid var(--border);max-width:500px;transform:scale(1);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}
#result-display.hidden .result-content{transform:scale(.7)}
.result-icon{font-size:4rem;margin-bottom:1rem;animation:float 2s ease-in-out infinite}
.result-content h3{color:var(--accent);font-size:1rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:4px;font-weight:600}
.result-content p{font-size:2.2rem;font-weight:800;margin-bottom:1.5rem;color:#fff;word-break:break-word;line-height:1.2}
.result-sponsor{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:1.5rem;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}
.sponsor-brand-sm{font-family:'Bungee',cursive;font-size:.8rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* SPIN COUNTER */
#spin-counter-bar{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;z-index:10;flex-wrap:wrap;justify-content:center}
.counter-badge{display:flex;align-items:center;gap:.75rem;background:rgba(15,17,28,.85);border:1px solid var(--border);border-radius:14px;padding:.6rem 1.2rem;backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s;min-width:200px}
.counter-badge.has-spins{border-color:rgba(229,64,101,.3);box-shadow:0 0 20px rgba(229,64,101,.15)}
.counter-icon{font-size:1.6rem;line-height:1}
.counter-info{display:flex;flex-direction:column;gap:.1rem}
.counter-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.counter-number{font-size:1.8rem;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.counter-number.bump{transform:scale(1.35)}
.counter-controls{display:flex;align-items:center;gap:.5rem}
.pix-input-group{display:flex;align-items:center;background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.pix-input-group:focus-within{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.pix-prefix{padding:.5rem .6rem .5rem .8rem;color:var(--text-muted);font-size:.85rem;font-weight:600;user-select:none}
#pix-value-input{width:70px;background:transparent;border:none;color:var(--text);font-family:'Inter',sans-serif;font-size:.95rem;padding:.5rem .6rem .5rem 0;outline:none;-moz-appearance:textfield}
#pix-value-input::-webkit-inner-spin-button,#pix-value-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.btn-add-pix{display:flex;align-items:center;gap:.35rem;padding:.55rem 1rem;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:10px;color:#fff;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn-add-pix:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(16,185,129,.3)}
.btn-add-pix:active{transform:scale(.96)}
.btn-add-one{padding:.55rem .9rem;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.btn-add-one:hover{background:rgba(255,255,255,.1);border-color:var(--border-hover);transform:translateY(-1px)}
.btn-add-one:active{transform:scale(.96)}

/* FLAVOR PILLS */
.flavor-pills{display:flex;gap:.6rem;margin-top:1.2rem;z-index:10;flex-wrap:wrap;justify-content:center}
.flavor-pill{padding:.35rem .9rem;border-radius:20px;font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--border);background:rgba(0,0,0,.3);backdrop-filter:blur(8px);animation:float 4s ease-in-out infinite}
.pill-moscow{color:#F97316;border-color:rgba(249,115,22,.3);animation-delay:0s}
.pill-mate{color:#22c55e;border-color:rgba(34,197,94,.3);animation-delay:.5s}
.pill-watermelon{color:#E54065;border-color:rgba(229,64,101,.3);animation-delay:1s}
.pill-caipi{color:#FFC907;border-color:rgba(255,201,7,.3);animation-delay:1.5s}

/* PIX NOTIFICATION */
.pix-notification{position:fixed;top:1.5rem;right:1.5rem;background:rgba(15,17,28,.92);border:1px solid rgba(16,185,129,.4);border-radius:14px;padding:1rem 1.4rem;display:flex;align-items:center;gap:.75rem;z-index:200;backdrop-filter:blur(12px);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 20px rgba(16,185,129,.15);animation:slideInNotif .4s cubic-bezier(.34,1.56,.64,1),fadeOutNotif .4s ease 3.6s forwards;pointer-events:none}
.pix-notification .notif-icon{font-size:1.5rem}
.pix-notification .notif-text{display:flex;flex-direction:column;gap:.15rem}
.pix-notification .notif-title{font-size:.85rem;font-weight:700;color:#10b981}
.pix-notification .notif-desc{font-size:.8rem;color:var(--text-muted)}
@keyframes slideInNotif{0%{transform:translateX(120%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes fadeOutNotif{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(50px)}}

/* BLOCKED SPIN */
.wheel-center.blocked{opacity:.4;cursor:not-allowed;pointer-events:none}
.wheel-center.blocked:hover{transform:none;box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.8)}
@keyframes noSpinsShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.counter-badge.no-spins-shake{animation:noSpinsShake .4s ease;border-color:#f87171!important;box-shadow:0 0 15px rgba(248,113,113,.3)!important}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){.login-logo-img,.main-title,.wheel-glow,.result-icon,.flavor-pill{animation:none!important}.wheel-pointer.tick-anim{animation:none!important}}