@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;font-family:Luckiest Guy,cursive,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body,html{overflow-x:hidden}body{min-height:100vh;color:#fff;position:relative}.animated-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(-45deg,#0f0f23,#1a1a3e,#2d1b4e,#1e3a5f,#0f2027,#203a43,#2c5364,#1a1a2e);background-size:400% 400%;animation:gradientShift 15s ease infinite;z-index:-2}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.app-container{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.floating-tards{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}.floating-tard{position:absolute;opacity:.5;border-radius:50%;background-size:cover;background-position:50%;filter:hue-rotate(var(--hue)) drop-shadow(0 0 10px rgba(255,255,255,.2));animation:floatAround var(--duration) ease-in-out infinite;animation-delay:var(--delay)}@keyframes floatAround{0%,to{transform:translate(0) rotate(0deg) scale(1)}25%{transform:translate(20px,-30px) rotate(5deg) scale(1.05)}50%{transform:translate(-10px,-50px) rotate(-5deg) scale(1.1)}75%{transform:translate(-25px,-20px) rotate(3deg) scale(1.05)}}.logo{display:flex;justify-content:center;gap:5px;margin-bottom:20px;z-index:1;animation:logoEntrance .8s ease-out}@keyframes logoEntrance{0%{transform:translateY(-50px) scale(.5);opacity:0}60%{transform:translateY(10px) scale(1.1)}to{transform:translateY(0) scale(1);opacity:1}}.logo-letter{font-family:Luckiest Guy,cursive;font-size:5rem;font-weight:400;text-shadow:4px 4px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,4px 0 0 #000,0 4px 0 #000,6px 6px 0 rgba(0,0,0,.3);letter-spacing:2px;animation:letterBounce 2s ease-in-out infinite;animation-delay:var(--delay)}@keyframes letterBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.logo-letter.t{color:#00a8ff;--delay:0s}.logo-letter.a{color:#ff3d3d;--delay:0.1s}.logo-letter.r{color:#ff3d3d;--delay:0.2s}.logo-letter.d{color:#ffd93d;--delay:0.3s}.logo-letter.s{color:#2ecc71;--delay:0.4s}.main-card{background:linear-gradient(145deg,#ffd93d,#f5c800);border-radius:20px;border:5px solid #000;padding:30px;z-index:1;max-width:800px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.3),inset 0 2px 0 hsla(0,0%,100%,.3);animation:cardEntrance .6s ease-out .3s both}@keyframes cardEntrance{0%{transform:translateY(30px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.main-card-content{display:flex;gap:30px;align-items:flex-start}.tard-display{flex-shrink:0}.tard-frame{background:linear-gradient(145deg,#e74c3c,#c0392b);border-radius:20px;border:4px solid #000;padding:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 20px rgba(0,0,0,.3),inset 0 2px 0 hsla(0,0%,100%,.2);transition:transform .3s ease,box-shadow .3s ease}.tard-frame:hover{transform:scale(1.05) rotate(-2deg);box-shadow:0 10px 30px rgba(0,0,0,.4)}.tard-image{width:200px;height:200px;border-radius:15px;object-fit:cover;animation:tardPulse 3s ease-in-out infinite}@keyframes tardPulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.input-section{flex:1 1;display:flex;flex-direction:column;gap:15px}.copy-ca-section{background:linear-gradient(145deg,#9b59b6,#8e44ad);border:4px solid #000;border-radius:15px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 4px 15px rgba(0,0,0,.2),inset 0 2px 0 hsla(0,0%,100%,.2);animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 4px 15px rgba(0,0,0,.2),inset 0 2px 0 hsla(0,0%,100%,.2),0 0 20px rgba(155,89,182,.3)}50%{box-shadow:0 4px 15px rgba(0,0,0,.2),inset 0 2px 0 hsla(0,0%,100%,.2),0 0 30px rgba(155,89,182,.6)}}.ca-label{font-family:Luckiest Guy,cursive;font-size:1rem;text-shadow:2px 2px 0 #000}.ca-address,.ca-label{color:#fff;white-space:nowrap}.ca-address{flex:1 1;font-family:monospace;font-size:.75rem;background:rgba(0,0,0,.3);padding:8px 12px;border-radius:8px;overflow:hidden;text-overflow:ellipsis}.copy-btn{background:linear-gradient(145deg,#2ecc71,#27ae60);border:3px solid #000;border-radius:10px;padding:8px 15px;font-family:Luckiest Guy,cursive;font-size:.9rem;color:#fff;cursor:pointer;text-shadow:1px 1px 0 #000;transition:all .2s ease;box-shadow:3px 3px 0 #000;white-space:nowrap}.copy-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}.copy-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.copy-btn.copied{background:linear-gradient(145deg,#3498db,#2980b9)}.create-title{display:flex;gap:3px;margin-bottom:5px}.create-letter{font-family:Luckiest Guy,cursive;font-size:2.8rem;text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;animation:letterWave 1.5s ease-in-out infinite;animation-delay:var(--delay)}@keyframes letterWave{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(3deg)}}.create-letter:first-child{color:#00a8ff;--delay:0s}.create-letter:nth-child(2){color:#ff3d3d;--delay:0.1s}.create-letter:nth-child(3){color:#ffd93d;--delay:0.2s}.create-letter:nth-child(4){color:#2ecc71;--delay:0.3s}.create-letter:nth-child(5){color:#ff3d3d;--delay:0.4s}.create-letter:nth-child(6){color:#00a8ff;--delay:0.5s}.prompt-container{background:linear-gradient(145deg,#2ecc71,#27ae60);border:4px solid #000;border-radius:15px;padding:15px 20px;box-shadow:0 4px 15px rgba(0,0,0,.2),inset 0 2px 0 hsla(0,0%,100%,.2);transition:transform .2s ease,box-shadow .2s ease}.prompt-container:focus-within{transform:scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.3),inset 0 2px 0 hsla(0,0%,100%,.2),0 0 20px rgba(46,204,113,.4)}.prompt-input{width:100%;padding:10px 15px;font-size:1.5rem;font-family:Luckiest Guy,cursive;border:none;background:transparent;color:#000;outline:none}.prompt-input::placeholder{color:rgba(0,0,0,.4)}.generate-btn{background:linear-gradient(145deg,#ff3d3d,#e62e2e);border:4px solid #000;border-radius:15px;padding:15px 30px;font-family:Luckiest Guy,cursive;font-size:1.8rem;color:#fff;cursor:pointer;text-shadow:2px 2px 0 #000;transition:all .2s ease;box-shadow:4px 4px 0 #000,inset 0 2px 0 hsla(0,0%,100%,.3);position:relative;overflow:hidden}.generate-btn:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,hsla(0,0%,100%,.1),transparent);transform:rotate(45deg);animation:buttonShine 3s ease-in-out infinite}@keyframes buttonShine{0%{transform:translateX(-100%) rotate(45deg)}50%,to{transform:translateX(100%) rotate(45deg)}}.generate-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;background:linear-gradient(145deg,#ff5252,#ff3d3d)}.generate-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.generate-btn:disabled{opacity:.7;cursor:not-allowed}.generate-btn.loading{animation:buttonPulse .8s ease-in-out infinite}@keyframes buttonPulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.gallery-row{display:flex;gap:10px;margin-top:20px;padding-top:20px;border-top:4px solid rgba(0,0,0,.2);overflow-x:auto;width:100%;justify-content:center;flex-wrap:wrap}.gallery-item{flex-shrink:0;width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid #000;transition:all .3s ease;animation:itemPop .5s ease-out both;animation-delay:calc(var(--index) * .1s)}@keyframes itemPop{0%{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}.gallery-item:hover{transform:scale(1.2) rotate(5deg);box-shadow:0 5px 20px rgba(0,0,0,.3);z-index:10}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-item.placeholder{opacity:.7;animation:placeholderFloat 3s ease-in-out infinite;animation-delay:calc(var(--index) * .2s)}@keyframes placeholderFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.message{padding:12px 20px;border-radius:10px;font-family:Luckiest Guy,cursive;font-size:1rem;text-align:center;animation:messageSlide .3s ease-out}@keyframes messageSlide{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.error-message{background:rgba(231,76,60,.3);border:2px solid #e74c3c;color:#fff}.success-message{background:rgba(46,204,113,.3);border:2px solid #2ecc71;color:#fff}.gallery-section{margin-top:40px;z-index:1;width:100%;max-width:1000px;animation:sectionFadeIn .6s ease-out .5s both}@keyframes sectionFadeIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.gallery-title{font-family:Luckiest Guy,cursive;font-size:2.5rem;text-align:center;margin-bottom:30px;text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;color:#ffd93d;animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{transform:scale(1);text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 0 20px rgba(255,217,61,.3)}50%{transform:scale(1.02);text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 0 40px rgba(255,217,61,.6)}}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:20px;gap:20px;justify-items:center}.gallery-card{background:linear-gradient(145deg,#2a2a4a,#1e1e3a);border-radius:20px;border:3px solid #444;padding:20px;text-align:center;transition:all .3s ease;width:100%;max-width:180px;animation:cardFloat .5s ease-out both;animation-delay:calc(var(--index) * .1s)}@keyframes cardFloat{0%{transform:translateY(30px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.gallery-card:hover{transform:translateY(-10px) scale(1.05);border-color:#ffd93d;box-shadow:0 15px 40px rgba(255,217,61,.2),0 0 30px rgba(255,217,61,.1)}.gallery-card-image{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #000;transition:transform .3s ease}.gallery-card:hover .gallery-card-image{transform:rotate(5deg) scale(1.05)}.gallery-card-prompt{margin-top:15px;font-size:.85rem;color:#ccc;font-family:sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.gallery-card-date{margin-top:8px;font-size:.7rem;color:#666;font-family:sans-serif}.empty-gallery{text-align:center;color:#888;padding:60px 40px;font-family:sans-serif;background:hsla(0,0%,100%,.05);border-radius:20px;border:2px dashed #444}.empty-gallery-icon{font-size:4rem;margin-bottom:20px;animation:emptyBounce 2s ease-in-out infinite}@keyframes emptyBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .3s ease-out}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(145deg,#2a2a4a,#1e1e3a);border-radius:30px;border:5px solid #ffd93d;padding:30px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn .4s ease-out;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(255,217,61,.2)}@keyframes modalSlideIn{0%{transform:scale(.8) translateY(50px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.modal-close{position:absolute;top:15px;right:15px;width:45px;height:45px;border-radius:50%;background:linear-gradient(145deg,#ff3d3d,#e62e2e);border:3px solid #000;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:3px 3px 0 #000;z-index:10}.modal-close:hover{transform:scale(1.1) rotate(90deg);box-shadow:4px 4px 0 #000}.modal-image-container{display:flex;justify-content:center;margin-bottom:20px}.modal-image{width:100%;max-width:400px;height:auto;border-radius:20px;border:5px solid #000;box-shadow:0 10px 40px rgba(0,0,0,.4);animation:modalImagePop .5s ease-out .2s both}@keyframes modalImagePop{0%{transform:scale(.5) rotate(-10deg);opacity:0}60%{transform:scale(1.05) rotate(2deg)}to{transform:scale(1) rotate(0deg);opacity:1}}.modal-info{text-align:center;margin-bottom:20px}.modal-prompt{font-family:Luckiest Guy,cursive;font-size:1.5rem;color:#ffd93d;text-shadow:2px 2px 0 #000;margin-bottom:10px;line-height:1.3}.modal-date{font-family:sans-serif;font-size:.9rem;color:#888}.modal-download{width:100%;background:linear-gradient(145deg,#2ecc71,#27ae60);border:4px solid #000;border-radius:15px;padding:15px 30px;font-family:Luckiest Guy,cursive;font-size:1.5rem;color:#fff;cursor:pointer;text-shadow:2px 2px 0 #000;transition:all .2s ease;box-shadow:4px 4px 0 #000}.modal-download:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000;background:linear-gradient(145deg,#3ddc84,#2ecc71)}.modal-download:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.tard-count{font-size:1.5rem;color:#2ecc71}.load-more-trigger{padding:40px 20px;text-align:center;min-height:100px}.loading-more{display:flex;flex-direction:column;align-items:center;gap:15px;color:#888;font-family:sans-serif}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,217,61,.2);border-top-color:#ffd93d;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.no-more-tards{color:#666;font-family:Luckiest Guy,cursive;font-size:1.2rem;text-shadow:1px 1px 0 #000}.gallery-card,.gallery-item{cursor:pointer}@media (max-width:768px){.modal-content{padding:20px;border-radius:20px;margin:10px}.modal-image{max-width:100%}.modal-download,.modal-prompt{font-size:1.2rem}.modal-download{padding:12px 20px}.modal-close{width:40px;height:40px;font-size:1.2rem}.logo-letter{font-size:3rem}.main-card{padding:20px}.main-card-content{flex-direction:column;align-items:center}.tard-image{width:150px;height:150px}.create-letter{font-size:2rem}.prompt-input{font-size:1.2rem}.generate-btn{font-size:1.4rem;width:100%}.copy-ca-section{flex-wrap:wrap;justify-content:center}.ca-address{width:100%;text-align:center}.gallery-card{max-width:140px}.gallery-card-image{width:100px;height:100px}.gallery-row{justify-content:center}.gallery-item{width:60px;height:60px}}