*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;align-items:center;justify-content:center}.password-page{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.password-container{background:white;padding:50px 40px;border-radius:20px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:400px;width:100%;animation:fadeIn .6s ease-out}.password-container h1{color:#667eea;margin-bottom:10px;font-size:2rem}.password-container p{color:#666;margin-bottom:30px;font-size:1.1rem}.password-input{width:100%;padding:15px;font-size:1rem;border:2px solid #e0e0e0;border-radius:10px;margin-bottom:20px;transition:border-color .3s}.password-input:focus{outline:none;border-color:#667eea}.submit-btn{width:100%;padding:15px;font-size:1.1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}.submit-btn:active{transform:translateY(0)}.error-msg{color:#e74c3c;margin-top:15px;font-size:.9rem;animation:shake .5s}.bingo-page{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.bingo-container{animation:fadeIn .6s ease-out;max-width:800px;width:100%}.bingo-container h1{color:#fff;text-align:center;margin-bottom:10px;font-size:2.5rem;text-shadow:0 2px 10px rgba(0,0,0,.3)}.subtitle{color:#ffffffe6;text-align:center;margin-bottom:30px;font-size:1.1rem}.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:rgba(255,255,255,.1);padding:15px;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.bingo-cell{aspect-ratio:1;background:white;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:15px;cursor:pointer;transition:all .3s ease;position:relative;box-shadow:0 4px 6px #0000001a}.bingo-cell span{font-size:.85rem;text-align:center;color:#333;line-height:1.3;z-index:1;transition:color .3s}.bingo-cell:hover:not(.completed){transform:translateY(-5px);box-shadow:0 8px 15px #0003}.bingo-cell.free{background:linear-gradient(135deg,#ffd89b 0%,#19547b 100%);cursor:default}.bingo-cell.free span{color:#fff;font-weight:700}.bingo-cell.completed{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);cursor:pointer}.bingo-cell.completed span{color:#fff}.checkmark{position:absolute;top:5px;right:5px;background:white;color:#667eea;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;box-shadow:0 2px 5px #0003}.letter-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .5s ease-out;padding:20px}.envelope{position:relative;width:350px;height:250px;perspective:1000px;transition:opacity .5s ease-in-out 2s}.envelope.open{opacity:0;pointer-events:none}.envelope-back{position:absolute;top:50px;left:0;width:100%;height:150px;background:#d8d8d8;border-radius:5px;z-index:1}.envelope-body{position:absolute;bottom:0;width:100%;height:200px;background:#f4f4f4;border-radius:0 0 10px 10px;box-shadow:0 10px 30px #00000080;overflow:visible;z-index:5}.envelope-flap{position:absolute;top:50px;left:0;width:100%;height:100px;background:linear-gradient(to bottom,#e8e8e8 0%,#d0d0d0 100%);clip-path:polygon(0 0,50% 50%,100% 0);transform-origin:top center;transition:transform 1.5s ease-in-out;box-shadow:0 5px 20px #0000004d;z-index:15}.envelope.open .envelope-flap{transform:rotateX(180deg)}.letter{position:fixed;width:90%;max-width:600px;left:50%;top:50%;background:white;border-radius:5px;box-shadow:0 5px 15px #0003;transition:all 1.5s ease-in-out .5s;transform:translate(-50%,100vh);opacity:0;visibility:hidden;z-index:1001}.letter.open{transform:translate(-50%,-50%);opacity:1;visibility:visible}.letter-content{padding:30px 25px;max-height:400px;overflow-y:auto;font-family:Georgia,serif;line-height:1.8}.letter-content h2{color:#667eea;margin-bottom:20px;font-size:1.8rem;font-style:italic}.letter-content p{color:#333;margin-bottom:15px;font-size:1rem}.signature{margin-top:30px;font-style:italic;color:#667eea;font-weight:700}.close-letter{margin-top:30px;padding:15px 40px;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:25px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 5px 20px #0000004d}.close-letter:hover{transform:translateY(-2px);box-shadow:0 7px 25px #667eea80}.close-letter:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media (max-width: 768px){.bingo-grid{gap:8px;padding:10px}.bingo-cell span{font-size:.7rem}.bingo-container h1{font-size:2rem}.envelope{width:300px;height:220px}.envelope-body{height:180px}.letter-content{padding:20px 15px;font-size:.9rem}.letter-content h2{font-size:1.5rem}}@media (max-width: 480px){.bingo-cell span{font-size:.6rem}.checkmark{width:20px;height:20px;font-size:.8rem}}