body{margin:0;font-family:sans-serif;overflow-x:hidden;background-color:#000;color:#fff}.App{text-align:center}.soft-mode{background:linear-gradient(-45deg,#d52d00,#ff9a56,#ffda56,#d52d00);background-size:400% 400%;animation:gradientMove 15s ease infinite;min-height:100vh;padding:20px;position:relative}.nsfw-mode{background:linear-gradient(-45deg,#2e003e,#57024e,#9d1b6c,#2e003e);background-size:400% 400%;animation:gradientMove 20s ease infinite;min-height:100vh;padding:20px;position:relative}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.menu{text-align:center;margin-top:40px;z-index:2;position:relative}.menu button{margin:0 10px;padding:10px 18px;font-size:1rem;border-radius:30px;border:none;cursor:pointer;background:rgba(255,255,255,.2);color:#fff;transition:background-color .3s ease}.menu button:hover{background:rgba(255,255,255,.5)}.cards-container{display:flex;justify-content:center;flex-wrap:nowrap;gap:30px;margin-top:40px;overflow-x:auto;padding-bottom:20px;z-index:2;position:relative}.card{width:200px;height:320px;perspective:1000px;opacity:0;animation:fadeIn 1s ease forwards}@keyframes fadeIn{to{opacity:1}}.card-inner{position:relative;width:100%;height:100%;transition:transform 1s;transform-style:preserve-3d;cursor:pointer}.card:hover .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;border-radius:16px;backface-visibility:hidden;overflow:hidden}.card-front img,.card-back img{width:100%;height:100%;object-fit:cover}.card-back:after{content:attr(data-quote);position:absolute;bottom:10px;left:10px;right:10px;padding:6px;font-size:.95rem;text-align:center;background:rgba(0,0,0,.4);border-radius:8px;font-weight:700;color:#fff;text-shadow:0 0 6px rgba(0,170,255,.8)}.nsfw-mode .card-back:after{text-shadow:0 0 6px rgba(255,0,170,.8)}.card-back{transform:rotateY(180deg)}.soft-mode .card-front,.soft-mode .card-back{box-shadow:0 0 30px 5px #00aaffe6}.nsfw-mode .card-front,.nsfw-mode .card-back{box-shadow:0 0 30px 5px #ff00aab3}.hearts-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.hearts-bg span{position:absolute;font-size:2rem;color:#fff6;animation:floatHeart 6s infinite ease-in-out;-webkit-user-select:none;user-select:none}.hearts-bg span:nth-child(1){left:10%;top:30%;animation-delay:0s}.hearts-bg span:nth-child(2){left:30%;top:70%;animation-delay:1s}.hearts-bg span:nth-child(3){left:50%;top:40%;animation-delay:2s}.hearts-bg span:nth-child(4){left:70%;top:60%;animation-delay:3s}.hearts-bg span:nth-child(5){left:85%;top:20%;animation-delay:4s}@keyframes floatHeart{0%{transform:translateY(0);opacity:.6}50%{transform:translateY(-20px);opacity:1}to{transform:translateY(0);opacity:.6}}.dreamdrop-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}.dreamdrop-word{position:absolute;opacity:0;animation:fadeWord 5s ease-in-out forwards;font-weight:300;white-space:nowrap;-webkit-user-select:none;user-select:none}.dreamdrop-word.soft{color:#fff6;text-shadow:0 0 8px #00d5ff}.dreamdrop-word.nsfw{color:#ffffff59;text-shadow:0 0 10px #b000ff}@keyframes fadeWord{0%{opacity:0;transform:scale(.9)}10%{opacity:.5}50%{opacity:.8}90%{opacity:.3}to{opacity:0;transform:scale(1.1)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app-container{display:flex;flex-direction:column;align-items:center;padding:1rem;background:linear-gradient(270deg,#ff80ab,#b388ff,#80d8ff);background-size:600% 600%;animation:gradientShift 20s ease infinite;min-height:100vh;box-sizing:border-box;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.top-bar{width:100%;max-width:1100px;display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.mode-label{font-weight:700;font-size:1.2rem;align-self:center}.btn-music,.btn-password{background:rgba(255 255 255 / .25);border:none;padding:.5rem 1rem;border-radius:12px;color:#fff;font-weight:600;cursor:pointer;transition:background-color .3s ease}.btn-music:hover,.btn-password:hover{background:rgba(255 255 255 / .4)}.password-entry{display:flex;gap:.5rem;align-items:center}.password-entry input{padding:.4rem .6rem;border-radius:8px;border:none;outline:none;font-size:1rem;font-weight:600}.password-entry button{padding:.4rem .8rem;background:rgba(255 255 255 / .3);border:none;border-radius:10px;cursor:pointer;font-weight:700;color:#fff;transition:background-color .3s ease}.password-entry button:hover{background:rgba(255 255 255 / .5)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;width:100%;max-width:1100px;padding-bottom:2rem}
