@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap);:root{--electric-blue:#0ea5e9;--hot-pink:#ec4899;--lime-green:#84cc16;--purple:#8b5cf6;--orange:#f59e0b;--bg-dark:#0a0f1e;--bg-card:#1e293b;--bg-card-light:#334155;--border-thick:3px;--border-color:#fff3;--glow-color:#0ea5e966;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--spring:cubic-bezier(0.34,1.56,0.64,1);--ease-out:cubic-bezier(0.4,0,0.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#0a0f1e,#1e293b 50%,#0f172a);background:linear-gradient(135deg,var(--bg-dark) 0,#1e293b 50%,#0f172a 100%);background-attachment:fixed;color:#fff;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;overflow-x:hidden;position:relative}body:before{animation:backgroundFloat 20s ease-in-out infinite;background:radial-gradient(circle at 20% 50%,#0ea5e926 0,#0000 50%),radial-gradient(circle at 80% 80%,#ec489926 0,#0000 50%),radial-gradient(circle at 40% 20%,#8b5cf626 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:0}@keyframes backgroundFloat{0%,to{opacity:.3}50%{opacity:.6}}.app{align-items:center;display:flex;flex-direction:column;min-height:100vh;padding:24px;padding:var(--space-lg);z-index:1}.app,.container{position:relative}.container{animation:fadeInScale .6s cubic-bezier(.34,1.56,.64,1);animation:fadeInScale .6s var(--spring);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);background:linear-gradient(135deg,#1e293bf2,#0f172af2);border-radius:24px;border-radius:var(--radius-xl);box-shadow:0 20px 60px #00000080,0 0 0 3px #fff3,inset 0 1px 0 #ffffff1a;box-shadow:0 20px 60px #00000080,0 0 0 var(--border-thick) var(--border-color),inset 0 1px 0 #ffffff1a;margin:0 auto;max-width:560px;padding:32px;padding:var(--space-xl);width:100%}.container:before{background:linear-gradient(90deg,#0000,#0ea5e9,#ec4899,#0000);background:linear-gradient(90deg,#0000,var(--electric-blue),var(--hot-pink),#0000);content:"";height:2px;left:0;opacity:.5;position:absolute;right:0;top:0}@keyframes fadeInScale{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.header{margin-bottom:32px;margin-bottom:var(--space-xl);text-align:center}.title{-webkit-text-fill-color:#0000;animation:titleFloat 3s ease-in-out infinite;background:linear-gradient(135deg,#0ea5e9,#ec4899 50%,#8b5cf6);background:linear-gradient(135deg,var(--electric-blue) 0,var(--hot-pink) 50%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 30px rgba(14,165,233,.5));font-size:3.5rem;font-weight:900;letter-spacing:-2px;line-height:1.1;margin-bottom:12px;margin-bottom:var(--space-sm);position:relative}.title:after{background:linear-gradient(90deg,#0ea5e9,#ec4899);background:linear-gradient(90deg,var(--electric-blue),var(--hot-pink));border-radius:2px;bottom:-8px;box-shadow:0 0 20px #0ea5e9;box-shadow:0 0 20px var(--electric-blue);content:"";height:4px;left:50%;position:absolute;transform:translateX(-50%);width:100px}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.subtitle{color:#fffc;font-size:1.15rem;font-weight:500;margin-top:16px;margin-top:var(--space-md);opacity:.9}.form{gap:24px;gap:var(--space-lg);margin-bottom:24px;margin-bottom:var(--space-lg)}.form,.input-group{display:flex;flex-direction:column}.input-group{gap:8px;gap:var(--space-xs)}.label{color:#0ea5e9;color:var(--electric-blue);font-size:.9rem;font-weight:700;letter-spacing:1.5px;text-shadow:0 0 10px #0ea5e94d;text-transform:uppercase}.input{background:#fffffff2;border:3px solid #fff3;border:var(--border-thick) solid var(--border-color);border-radius:12px;border-radius:var(--radius-md);box-shadow:0 4px 0 #0ea5e94d;color:#0f172a;font-family:inherit;font-size:1.1rem;font-weight:600;padding:16px 24px;padding:var(--space-md) var(--space-lg);transition:all .2s cubic-bezier(.34,1.56,.64,1);transition:all .2s var(--spring)}.input::placeholder{color:#94a3b8;font-weight:500}.input:focus{background:#fff;border-color:#0ea5e9;border-color:var(--electric-blue);box-shadow:0 0 0 4px #0ea5e933,0 0 20px #0ea5e966,0 4px 0 #0ea5e9;box-shadow:0 0 0 4px #0ea5e933,0 0 20px var(--glow-color),0 4px 0 var(--electric-blue);outline:none;transform:translateY(-2px)}.button{border:3px solid #ffffff4d;border:var(--border-thick) solid #ffffff4d;border-radius:12px;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;font-size:1.1rem;font-weight:800;letter-spacing:.5px;overflow:hidden;padding:16px 32px;padding:var(--space-md) var(--space-xl);position:relative;text-transform:uppercase;transition:all .2s cubic-bezier(.34,1.56,.64,1);transition:all .2s var(--spring)}.button-primary{background:linear-gradient(135deg,#0ea5e9,#0284c7);background:linear-gradient(135deg,var(--electric-blue) 0,#0284c7 100%);box-shadow:0 0 20px #0ea5e966,0 4px 0 #0284c7,inset 0 1px 0 #fff3;color:#fff;transform:translateY(0)}.button-primary:hover{box-shadow:0 0 30px #0ea5e999,0 7px 0 #0284c7,inset 0 1px 0 #ffffff4d;transform:translateY(-3px)}.button-primary:active{box-shadow:0 0 15px #0ea5e966,0 1px 0 #0284c7,inset 0 1px 0 #fff3;transform:translateY(2px)}.button-secondary{background:#ffffff1a;border-color:#ffffff4d;box-shadow:0 4px 0 #ffffff1a;color:#fff}.button-secondary:hover{background:#ffffff26;border-color:#fff6;box-shadow:0 6px 0 #ffffff26;transform:translateY(-2px)}.button-secondary:active{box-shadow:0 1px 0 #ffffff1a;transform:translateY(2px)}.button-success{background:linear-gradient(135deg,#84cc16,#65a30d);background:linear-gradient(135deg,var(--lime-green) 0,#65a30d 100%);box-shadow:0 0 20px #84cc1666,0 4px 0 #65a30d;color:#fff}.button-success:hover{box-shadow:0 0 30px #84cc1699,0 7px 0 #65a30d;transform:translateY(-3px)}.button-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 20px #ef444466,0 4px 0 #dc2626;color:#fff}.button:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.button:before{background:radial-gradient(circle,#ffffff4d 0,#0000 70%);content:"";height:100%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:100%}.button:hover:before{transform:translate(-50%,-50%) scale(1)}.home-screen{text-align:center}.home-buttons{display:flex;flex-direction:column;gap:16px;gap:var(--space-md);margin-top:32px;margin-top:var(--space-xl)}.waiting-room{animation:fadeInScale .5s cubic-bezier(.34,1.56,.64,1);animation:fadeInScale .5s var(--spring)}.room-header{background:#0ea5e91a;border:3px solid #0ea5e94d;border:var(--border-thick) solid #0ea5e94d;border-radius:12px;border-radius:var(--radius-md);box-shadow:0 0 30px #0ea5e933;margin-bottom:24px;margin-bottom:var(--space-lg);padding:24px;padding:var(--space-lg);text-align:center}.room-code{color:#0ea5e9;color:var(--electric-blue);font-size:2.5rem;font-weight:900;letter-spacing:4px;margin-bottom:8px;margin-bottom:var(--space-xs);text-shadow:0 0 20px #0ea5e980}.bento-grid{grid-gap:16px;grid-gap:var(--space-md);display:grid;gap:16px;gap:var(--space-md);grid-template-columns:repeat(2,1fr);margin-bottom:24px;margin-bottom:var(--space-lg)}.bento-card{background:#ffffff0d;border:3px solid #ffffff1a;border:var(--border-thick) solid #ffffff1a;border-radius:12px;border-radius:var(--radius-md);padding:16px;padding:var(--space-md);transition:all .3s cubic-bezier(.34,1.56,.64,1)}.bento-card:hover{background:#ffffff14;border-color:#fff3;box-shadow:0 8px 0 #ffffff1a;transform:translateY(-4px)}.bento-card-large{grid-column:span 2}.players-list{background:#ffffff0d;border:3px solid #ffffff1a;border:var(--border-thick) solid #ffffff1a;border-radius:12px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:8px;gap:var(--space-xs);margin-bottom:16px;margin-bottom:var(--space-md);padding:16px;padding:var(--space-md)}.player-item{align-items:center;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;border-radius:var(--radius-sm);display:flex;font-size:.95rem;justify-content:space-between;padding:12px 16px;padding:var(--space-sm) var(--space-md);transition:all .2s ease}.player-item:hover{background:#ffffff14;border-color:#fff3;transform:translateX(4px)}.player-item span:first-child{align-items:center;display:flex;font-weight:600;gap:8px;gap:var(--space-xs)}.player-item span:last-child{color:#ffffffb3;font-size:.85rem}.host-badge{align-items:center;background:linear-gradient(135deg,#ec4899,#db2777);background:linear-gradient(135deg,var(--hot-pink),#db2777);border-radius:12px;box-shadow:0 0 10px #ec48994d;display:inline-flex;font-size:.75rem;font-weight:700;gap:4px;padding:2px 8px}.player-badge{animation:badgeBounce .5s cubic-bezier(.34,1.56,.64,1);animation:badgeBounce .5s var(--spring);background:linear-gradient(135deg,#8b5cf6,#7c3aed);background:linear-gradient(135deg,var(--purple) 0,#7c3aed 100%);border:2px solid #ffffff4d;border-radius:8px;border-radius:var(--radius-sm);box-shadow:0 0 15px #8b5cf666,0 3px 0 #7c3aed;font-size:.9rem;font-weight:700;padding:12px 16px;padding:var(--space-sm) var(--space-md)}.player-badge.host{background:linear-gradient(135deg,#ec4899,#db2777);background:linear-gradient(135deg,var(--hot-pink) 0,#db2777 100%);box-shadow:0 0 15px #ec489966,0 3px 0 #db2777}@keyframes badgeBounce{0%{opacity:0;transform:scale(.5) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.progress-container{margin:24px 0;margin:var(--space-lg) 0}.progress-bar{background:#ffffff1a;border:3px solid #fff3;border:var(--border-thick) solid #fff3;border-radius:6px;height:12px;overflow:hidden;position:relative}.progress-fill{animation:progressShimmer 2s linear infinite;background:linear-gradient(90deg,#0ea5e9,#ec4899 50%,#84cc16);background:linear-gradient(90deg,var(--electric-blue) 0,var(--hot-pink) 50%,var(--lime-green) 100%);background-size:200% 100%;box-shadow:0 0 20px #0ea5e980;height:100%;transition:width .5s cubic-bezier(.34,1.56,.64,1);transition:width .5s var(--spring)}@keyframes progressShimmer{to{background-position:200% 0}}.game-screen{position:relative}.hud-header{align-items:center;background:#00000080;border:3px solid #0ea5e9;border:var(--border-thick) solid var(--electric-blue);border-radius:12px;border-radius:var(--radius-md);box-shadow:0 0 30px #0ea5e94d,inset 0 0 20px #0ea5e91a;display:flex;justify-content:space-between;margin-bottom:24px;margin-bottom:var(--space-lg);padding:16px;padding:var(--space-md)}.hud-stat{text-align:center}.hud-stat-label{font-size:.75rem;letter-spacing:1px;margin-bottom:4px;opacity:.7;text-transform:uppercase}.hud-stat-value{color:#0ea5e9;color:var(--electric-blue);font-size:1.5rem;font-weight:900;text-shadow:0 0 15px #0ea5e9b3}.timer{animation:timerPulse 1s ease-in-out infinite;color:#84cc16;color:var(--lime-green);font-size:2rem;font-weight:900;text-shadow:0 0 20px #84cc16b3}.timer.warning{color:#f59e0b;color:var(--orange);text-shadow:0 0 20px #f59e0bb3}.timer.danger{color:#ef4444;text-shadow:0 0 20px #ef4444b3}@keyframes timerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.photo-container{animation:photoReveal .5s cubic-bezier(.34,1.56,.64,1);animation:photoReveal .5s var(--spring);border:3px solid #0ea5e9;border:var(--border-thick) solid var(--electric-blue);border-radius:16px;border-radius:var(--radius-lg);box-shadow:0 0 30px #0ea5e966,0 10px 0 #0ea5e933;margin-bottom:24px;margin-bottom:var(--space-lg);overflow:hidden;position:relative;width:100%}@keyframes photoReveal{0%{opacity:0;transform:scale(.9) rotateY(90deg)}to{opacity:1;transform:scale(1) rotateY(0)}}.photo-container img{display:block;height:auto;width:100%}.player-selection{grid-gap:12px;grid-gap:var(--space-sm);display:grid;gap:12px;gap:var(--space-sm);grid-template-columns:repeat(2,1fr);margin-bottom:24px;margin-bottom:var(--space-lg)}.player-option{background:#ffffff0d;border:3px solid #fff3;border:var(--border-thick) solid #fff3;border-radius:12px;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:700;padding:16px;padding:var(--space-md);text-align:center;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.player-option:hover{background:#0ea5e933;border-color:#0ea5e9;border-color:var(--electric-blue);box-shadow:0 0 20px #0ea5e966,0 6px 0 #0ea5e94d;transform:translateY(-4px) scale(1.02)}.player-option.selected{background:linear-gradient(135deg,#0ea5e9,#0284c7);background:linear-gradient(135deg,var(--electric-blue) 0,#0284c7 100%);border-color:#fff;box-shadow:0 0 30px #0ea5e999,0 4px 0 #0284c7;transform:translateY(-2px)}.results-screen{text-align:center}.result-header{animation:resultReveal .6s cubic-bezier(.34,1.56,.64,1);animation:resultReveal .6s var(--spring);background:#0ea5e91a;border:3px solid #0ea5e94d;border:var(--border-thick) solid #0ea5e94d;border-radius:16px;border-radius:var(--radius-lg);margin-bottom:32px;margin-bottom:var(--space-xl);padding:32px;padding:var(--space-xl)}@keyframes resultReveal{0%{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.result-emoji{animation:emojiPop .6s cubic-bezier(.34,1.56,.64,1);animation:emojiPop .6s var(--spring);font-size:5rem;margin-bottom:16px;margin-bottom:var(--space-md)}@keyframes emojiPop{0%{transform:scale(0) rotate(-180deg)}50%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0)}}.score-display{-webkit-text-fill-color:#0000;animation:scoreCount .5s ease-out;background:linear-gradient(135deg,#84cc16,#0ea5e9);background:linear-gradient(135deg,var(--lime-green) 0,var(--electric-blue) 100%);-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:900;text-shadow:0 0 30px #84cc1680}@keyframes scoreCount{0%{opacity:0;transform:scale(2)}to{opacity:1;transform:scale(1)}}.leaderboard{margin-top:32px;margin-top:var(--space-xl)}.leaderboard-item{align-items:center;animation:leaderboardSlide .5s cubic-bezier(.34,1.56,.64,1) backwards;animation:leaderboardSlide .5s var(--spring) backwards;background:#ffffff0d;border:3px solid #ffffff1a;border:var(--border-thick) solid #ffffff1a;border-radius:12px;border-radius:var(--radius-md);display:flex;justify-content:space-between;margin-bottom:12px;margin-bottom:var(--space-sm);padding:16px 24px;padding:var(--space-md) var(--space-lg);transition:all .3s cubic-bezier(.34,1.56,.64,1);transition:all .3s var(--spring)}.leaderboard-item:first-child{animation-delay:.1s}.leaderboard-item:nth-child(2){animation-delay:.2s}.leaderboard-item:nth-child(3){animation-delay:.3s}@keyframes leaderboardSlide{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}.leaderboard-item.rank-1{background:linear-gradient(135deg,#ffd70033,#ffc1071a);border-color:gold;box-shadow:0 0 20px #ffd7004d}.leaderboard-item.rank-2{background:linear-gradient(135deg,#c0c0c033,#a9a9a91a);border-color:silver}.leaderboard-item.rank-3{background:linear-gradient(135deg,#cd7f3233,#b873331a);border-color:#cd7f32}.rank-badge{font-size:1.5rem;font-weight:900;min-width:40px}.player-name{flex:1 1;font-size:1.1rem;font-weight:700;margin-left:16px;margin-left:var(--space-md);text-align:left}.player-score{color:#0ea5e9;color:var(--electric-blue);font-size:1.3rem;font-weight:900;text-shadow:0 0 10px #0ea5e980}.notification{animation:notificationSlide .5s cubic-bezier(.34,1.56,.64,1);animation:notificationSlide .5s var(--spring);background:linear-gradient(135deg,#84cc16,#65a30d);background:linear-gradient(135deg,var(--lime-green) 0,#65a30d 100%);border:3px solid #fff;border:var(--border-thick) solid #fff;border-radius:12px;border-radius:var(--radius-md);box-shadow:0 0 30px #84cc1680,0 4px 0 #65a30d;color:#fff;font-weight:700;left:50%;padding:16px 32px;padding:var(--space-md) var(--space-xl);position:fixed;top:24px;top:var(--space-lg);transform:translateX(-50%);z-index:9999}.notification.error{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 30px #ef444480,0 4px 0 #dc2626}@keyframes notificationSlide{0%{opacity:0;transform:translateX(-50%) translateY(-100px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:600px){:root{--space-lg:16px;--space-xl:24px}.title{font-size:2.5rem}.container{padding:24px;padding:var(--space-lg)}.bento-grid,.player-selection{grid-template-columns:1fr}.hud-header{flex-direction:column;gap:12px;gap:var(--space-sm)}}.glow-text{text-shadow:0 0 20px currentColor}.pulse{animation:pulse 2s ease-in-out infinite}.spin{animation:spin 2s linear infinite}.game-photo{border:3px solid #fff3;border:var(--border-thick) solid var(--border-color);border-radius:16px;border-radius:var(--radius-lg);box-shadow:0 8px 32px #0000004d,inset 0 0 0 1px #ffffff1a;display:block;margin:0 auto;max-height:60vh;max-width:600px;object-fit:contain;width:100%}.hidden-input{display:none!important}.players-grid{grid-gap:12px;grid-gap:var(--space-sm);display:grid;gap:12px;gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:16px;margin-top:var(--space-md);width:100%}.player-button{background:linear-gradient(135deg,#0ea5e9,#8b5cf6);background:linear-gradient(135deg,var(--electric-blue),var(--purple));border:3px solid #ffffff4d;border:var(--border-thick) solid #ffffff4d;border-radius:12px;border-radius:var(--radius-md);box-shadow:4px 4px 0 #0000004d,0 0 20px #0ea5e94d;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;letter-spacing:.5px;padding:14px 20px;text-transform:uppercase;transition:all .2s cubic-bezier(.34,1.56,.64,1);transition:all .2s var(--spring)}.player-button:hover{box-shadow:6px 6px 0 #0000004d,0 0 30px #0ea5e999;transform:translate(-2px,-2px)}.player-button:active{box-shadow:2px 2px 0 #0000004d,0 0 15px #0ea5e966;transform:translate(2px,2px)}@media (max-width:768px){.game-photo{max-height:50vh;max-width:100%}.players-grid{gap:8px;gap:var(--space-xs);grid-template-columns:repeat(2,1fr)}.player-button{font-size:.9rem;padding:12px 16px}}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(4)}}.button:after{background:#ffffff80;border-radius:50%;content:"";height:5px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);width:5px}.button:active:after{animation:ripple .6s ease-out}.input:focus{animation:inputGlow 1.5s ease-in-out infinite}@keyframes inputGlow{0%,to{box-shadow:0 0 0 4px #0ea5e933,0 0 20px #0ea5e94d,0 4px 0 var(--electric-blue)}50%{box-shadow:0 0 0 4px #0ea5e94d,0 0 30px #0ea5e980,0 4px 0 var(--electric-blue)}}.player-badge:hover{animation:badgeWiggle .3s ease-in-out}@keyframes badgeWiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}.score-update{animation:scorePopIn .5s var(--spring)}@keyframes scorePopIn{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{transform:scale(1.3) rotate(10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.streak-indicator{animation:streakPulse .8s ease-in-out infinite}@keyframes streakPulse{0%,to{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.3);transform:scale(1.1)}}.timer.warning{animation:timerShake .5s ease-in-out infinite}@keyframes timerShake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.photo-container:hover{cursor:zoom-in;transform:scale(1.02);transition:transform .3s var(--spring)}.player-option{transition:all .2s var(--spring)}.player-option:hover{transform:translateY(-4px) scale(1.05);z-index:10}.leaderboard-item:hover{transform:translateX(8px) scale(1.02);z-index:10}.progress-container:hover .progress-fill{animation:progressShimmerFast 1s linear infinite;filter:brightness(1.2)}@keyframes progressShimmerFast{to{background-position:200% 0}}.room-code{cursor:pointer;position:relative;transition:all .3s var(--spring)}.room-code:after{bottom:-25px;color:#fff9;content:"Click to copy";font-size:.75rem;font-weight:500;left:50%;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .3s ease}.room-code:hover:after{opacity:1}.room-code:hover{text-shadow:0 0 30px #0ea5e9cc;transform:scale(1.1)}.bento-card{position:relative;transition:all .3s var(--spring)}.bento-card:before{background:linear-gradient(135deg,var(--electric-blue),var(--hot-pink));border-radius:var(--radius-md);bottom:-2px;content:"";left:-2px;opacity:0;position:absolute;right:-2px;top:-2px;transition:opacity .3s ease;z-index:-1}.bento-card:hover:before{opacity:.3}.share-button:hover .share-glow{animation:glowPulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:0}50%{opacity:1}}.notification{animation:notificationBounce .6s var(--spring)}.error-message,.success-message{animation:messageSlide .5s var(--spring)}@keyframes messageSlide{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.upload-button{overflow:hidden;position:relative}.upload-button:before{background:#fff3;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease;width:0}.upload-button:hover:before{height:300px;width:300px}.interactive-scale{transition:transform .2s var(--spring)}.interactive-scale:hover{transform:scale(1.05)}.interactive-scale:active{transform:scale(.95)}.glow-on-hover{transition:filter .3s ease,box-shadow .3s ease}.glow-on-hover:hover{box-shadow:0 0 40px currentColor;filter:brightness(1.2)}.rotate-on-hover{transition:transform .3s var(--spring)}.rotate-on-hover:hover{transform:rotate(1turn)}.bounce-in{animation:bounceIn .6s var(--spring)}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.slide-from-left{animation:slideFromLeft .5s var(--spring)}@keyframes slideFromLeft{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}.slide-from-right{animation:slideFromRight .5s var(--spring)}@keyframes slideFromRight{0%{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}.spinner{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.text-shimmer{animation:textShimmer 3s linear infinite;background-size:200% auto}@keyframes textShimmer{to{background-position:200%}}.heartbeat{animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}10%,30%{transform:scale(1.1)}20%,40%{transform:scale(1)}}.jello{animation:jello .9s}@keyframes jello{0%,to{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}}.tada{animation:tada 1s}@keyframes tada{0%,to{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}}.tutorial-overlay{align-items:center;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tutorial-container{animation:slideUp .4s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#1e293b,#0f172a);border:3px solid #ffffff1a;border-radius:24px;box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d,inset 0 1px 0 #ffffff1a;max-width:520px;overflow:hidden;padding:48px 40px 32px;position:relative;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tutorial-close{align-items:center;background:#ffffff1a;border:2px solid #fff3;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:20px;height:36px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .2s ease;width:36px}.tutorial-close:hover{background:#ff3b3033;border-color:#ff3b30;box-shadow:0 0 20px #ff3b3066;transform:scale(1.1)}.tutorial-progress{display:flex;gap:8px;justify-content:center;margin-bottom:32px}.progress-dot{border-radius:4px;height:8px;transition:all .3s cubic-bezier(.34,1.56,.64,1);width:8px}.progress-dot.active{box-shadow:0 0 20px currentColor;width:32px}.progress-dot.completed{opacity:.6}.tutorial-content{animation:contentSlide .3s ease-out;display:flex;flex-direction:column;justify-content:center;margin-bottom:32px;min-height:240px;text-align:center}@keyframes contentSlide{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.tutorial-emoji{animation:emojiFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 20px currentColor);font-size:80px;margin-bottom:24px}@keyframes emojiFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}.tutorial-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,currentColor,#fff);-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800;letter-spacing:-.5px;margin-bottom:16px}.tutorial-description{color:#fffc;font-size:16px;line-height:1.6;margin:0 auto;max-width:400px}.tutorial-navigation{display:flex;gap:12px;margin-bottom:24px}.tutorial-btn{border:none;border-radius:12px;cursor:pointer;flex:1 1;font-family:inherit;font-size:16px;font-weight:700;padding:16px 24px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.tutorial-btn-primary{background:#0ea5e9;border:3px solid #fff3;box-shadow:0 0 20px #0ea5e966,0 4px 0 #0ea5e999;color:#fff;transform:translateY(0)}.tutorial-btn-primary:hover{box-shadow:0 0 30px currentColor,0 6px 0 #0000004d;transform:translateY(-2px)}.tutorial-btn-primary:active{box-shadow:0 0 15px currentColor,0 1px 0 #0000004d;transform:translateY(2px)}.tutorial-btn-secondary{background:#ffffff1a;border:2px solid #fff3;box-shadow:none;color:#fff}.tutorial-btn-secondary:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d;transform:translateX(-4px)}.tutorial-btn-secondary:disabled{cursor:not-allowed}.tutorial-footer{align-items:center;border-top:1px solid #ffffff1a;display:flex;justify-content:space-between;padding-top:20px}.tutorial-checkbox{align-items:center;color:#ffffffb3;cursor:pointer;display:flex;font-size:14px;gap:8px;-webkit-user-select:none;user-select:none}.tutorial-checkbox input[type=checkbox]{accent-color:#0ea5e9;cursor:pointer;height:18px;width:18px}.tutorial-skip{background:none;border:none;border-radius:8px;color:#ffffff80;cursor:pointer;font-family:inherit;font-size:14px;padding:8px 16px;transition:all .2s ease}.tutorial-skip:hover{background:#ffffff0d;color:#fffc}.confetti-container{border-radius:24px;bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.confetti{animation:confettiFall 3s linear infinite;height:10px;opacity:0;position:absolute;top:-10px;width:10px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}to{opacity:0;transform:translateY(600px) rotate(1turn)}}@media (max-width:600px){.tutorial-container{padding:40px 24px 24px}.tutorial-emoji{font-size:64px}.tutorial-title{font-size:24px}.tutorial-description{font-size:15px}.tutorial-navigation{flex-direction:column}.tutorial-btn{padding:14px 20px}.tutorial-footer{align-items:flex-start;flex-direction:column;gap:12px}}.privacy-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000e6;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10001}.privacy-popup{animation:slideUp .4s ease;background:linear-gradient(135deg,#1e1e28fa,#28283cfa);border:2px solid #667eea4d;border-radius:24px;box-shadow:0 25px 80px #0009;max-height:90vh;max-width:600px;overflow:hidden;width:90%}.privacy-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:2px solid #fff3;color:#fff;display:flex;gap:16px;padding:28px;position:relative}.privacy-icon{animation:pulse 2s ease infinite;font-size:48px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.privacy-header h2{flex:1 1;font-size:26px;font-weight:700;margin:0;text-shadow:0 2px 4px #0000004d}.close-btn{align-items:center;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:32px;height:42px;justify-content:center;line-height:1;position:absolute;right:20px;top:20px;transition:all .3s ease;width:42px}.close-btn:hover{background:#ffffff4d;transform:rotate(90deg) scale(1.1)}.privacy-content{background:#14141e99;max-height:calc(90vh - 220px);overflow-y:auto;padding:32px 28px}.privacy-content::-webkit-scrollbar{width:6px}.privacy-content::-webkit-scrollbar-track{background:#ffffff0d}.privacy-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:3px}.privacy-feature{animation:slideInFeature .5s ease;animation-fill-mode:both;background:#ffffff08;border:1px solid #667eea33;border-radius:16px;display:flex;gap:20px;margin-bottom:28px;padding:20px;transition:all .3s ease}.privacy-feature:hover{background:#ffffff0d;border-color:#667eea66;transform:translateX(4px)}.privacy-feature:first-child{animation-delay:.1s}.privacy-feature:nth-child(2){animation-delay:.2s}.privacy-feature:nth-child(3){animation-delay:.3s}.privacy-feature:nth-child(4){animation-delay:.4s}@keyframes slideInFeature{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}.feature-icon{animation:bounce 2s ease infinite;flex-shrink:0;font-size:36px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.feature-text h3{color:#fff;font-size:18px;font-weight:700;margin:0 0 8px}.feature-text p{color:#fffc;font-size:14px;line-height:1.6;margin:0}.privacy-guarantee{animation:slideInFeature .5s ease .5s;animation-fill-mode:both;background:linear-gradient(135deg,#667eea33,#764ba233);border:2px solid #667eea4d;border-radius:16px;margin-top:32px;padding:24px;text-align:center}.guarantee-badge{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50px;box-shadow:0 4px 20px #667eea66;display:inline-flex;gap:10px;margin-bottom:16px;padding:12px 24px}.badge-icon{font-size:24px}.badge-icon,.badge-text{color:#fff;font-weight:700}.badge-text{font-size:16px}.guarantee-subtext{color:#ffffffe6;font-size:14px;font-style:italic;margin:0}.privacy-footer{align-items:center;background:#667eea1a;border-top:2px solid #667eea33;display:flex;gap:20px;justify-content:space-between;padding:20px 28px}.dont-show-checkbox{align-items:center;color:#ffffffe6;cursor:pointer;display:flex;gap:10px;-webkit-user-select:none;user-select:none}.dont-show-checkbox input[type=checkbox]{accent-color:#667eea;cursor:pointer;height:18px;width:18px}.dont-show-checkbox span{font-size:14px;font-weight:500}.got-it-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 15px #667eea66;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:14px 28px;transition:all .3s ease;white-space:nowrap}.got-it-btn:hover{box-shadow:0 6px 25px #667eea99;transform:translateY(-2px)}.got-it-btn:active{transform:translateY(0)}@media (max-width:768px){.privacy-popup{width:95%}.privacy-header{padding:20px}.privacy-header h2{font-size:20px}.privacy-icon{font-size:36px}.privacy-content{padding:20px}.privacy-feature{flex-direction:column;gap:12px;padding:16px}.feature-icon{font-size:32px}.feature-text h3{font-size:16px}.feature-text p{font-size:13px}.privacy-footer{flex-direction:column;gap:16px}.got-it-btn{width:100%}}.share-button-container{display:inline-block;position:relative}.share-button{align-items:center;background:linear-gradient(135deg,#0ea5e9,#0284c7);border:3px solid #ffffff4d;border-radius:12px;box-shadow:0 0 20px #0ea5e966,0 4px 0 #0284c7cc,inset 0 1px 0 #fff3;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:16px;font-weight:700;gap:10px;overflow:hidden;padding:14px 24px;position:relative;transform:translateY(0);transition:all .2s cubic-bezier(.34,1.56,.64,1)}.share-button:hover{box-shadow:0 0 30px #0ea5e999,0 6px 0 #0284c7cc,inset 0 1px 0 #ffffff4d;transform:translateY(-2px)}.share-button:active{box-shadow:0 0 15px #0ea5e966,0 1px 0 #0284c7cc,inset 0 1px 0 #fff3;transform:translateY(2px)}.share-icon{animation:shareIconPulse 2s ease-in-out infinite;font-size:20px}@keyframes shareIconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1) rotate(5deg)}}.share-text{position:relative;z-index:1}.share-glow{background:radial-gradient(circle,#ffffff4d 0,#0000 70%);height:100%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:100%}.share-button:hover .share-glow{transform:translate(-50%,-50%) scale(1)}.share-options{animation:dropdownSlide .3s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#1e293b,#0f172a);border:3px solid #0ea5e94d;border-radius:12px;box-shadow:0 10px 30px #00000080,0 0 0 1px #ffffff0d;left:0;padding:8px;position:absolute;right:0;top:calc(100% + 8px);z-index:100}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.share-option{align-items:center;background:#ffffff0d;border:2px solid #ffffff1a;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:15px;font-weight:600;gap:12px;margin-bottom:6px;padding:12px 16px;transition:all .2s ease;width:100%}.share-option:last-child{margin-bottom:0}.share-option:hover{background:#0ea5e933;border-color:#0ea5e966;box-shadow:0 0 15px #0ea5e94d;transform:translateX(4px)}.option-icon{font-size:18px}.option-text{flex:1 1;text-align:left}.copied-notification{animation:notificationBounce .5s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#84cc16,#65a30d);border:2px solid #ffffff4d;border-radius:8px;box-shadow:0 4px 15px #84cc1666,0 0 20px #84cc164d;color:#fff;font-size:14px;font-weight:700;left:50%;padding:10px 20px;position:absolute;top:-50px;transform:translateX(-50%);white-space:nowrap;z-index:1000}@keyframes notificationBounce{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.8)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}@media (max-width:600px){.share-button{font-size:15px;padding:12px 20px}.share-icon{font-size:18px}.share-options{left:50%;min-width:200px;right:auto;transform:translateX(-50%)}}
/*# sourceMappingURL=main.8d2a7998.css.map*/