@import"https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap";body{margin:0;font-family:Patrick Hand,cursive;background-color:#fdfbf7;background-image:radial-gradient(#dcdcdc 1px,transparent 1px);background-size:20px 20px;color:#2c3e50;display:flex;justify-content:center;min-height:100vh}.sketch-container{width:100%;max-width:600px;padding:2rem;text-align:center}.logo-img{max-width:300px;filter:drop-shadow(2px 2px 0px #000);margin-bottom:20px;transform:rotate(-2deg)}.sketch-box{background:#fff;border:2px solid #2c3e50;border-radius:255px 15px 225px/15px 225px 15px 255px;padding:2rem;box-shadow:5px 5px #2c3e50;margin-bottom:20px;transition:transform .2s}input{width:80%;padding:10px;font-family:Patrick Hand,cursive;font-size:1.2rem;border:2px solid #2c3e50;border-radius:255px 25px 225px/25px 225px 25px 255px;outline:none;background:#fff}button{margin-top:15px;padding:10px 30px;font-family:Patrick Hand,cursive;font-size:1.5rem;background:#ff6b6b;color:#fff;border:2px solid #2c3e50;border-radius:255px 15px 225px/15px 225px 15px 255px;cursor:pointer;box-shadow:3px 3px #2c3e50}button:active{transform:translateY(2px);box-shadow:1px 1px #2c3e50}button:disabled{background:#ccc;cursor:not-allowed}.error-msg{color:#d63031;font-weight:700}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-top:15px}.badge-item{border:1px solid #2c3e50;padding:5px;border-radius:10px}.badge-item img{width:50px;height:50px}.badge-name{font-size:.8rem;line-height:1;margin-top:5px}.friend-tag{display:inline-block;background:#74b9ff;color:#fff;border:2px solid #2c3e50;padding:2px 8px;margin:2px;border-radius:15px 225px 25px 255px/255px 25px 225px 15px;font-size:.9rem}.footer{margin-top:60px;font-size:1rem;opacity:.8;display:flex;align-items:center;justify-content:center;gap:8px;padding-bottom:20px}.signature-container{position:relative;display:inline-block;font-weight:700;color:#ff6b6b}.signature-text{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid rgba(44,62,80,0);animation:write-name 1.5s ease-out forwards,hide-border 1.5s steps(1) forwards;animation-delay:.5s}.pencil-writer{position:absolute;top:-15px;right:-5px;font-size:1.5rem;pointer-events:none;animation:write-pencil 1.5s ease-out forwards;animation-delay:.5s;opacity:0}@keyframes write-name{0%{width:0}to{width:100%}}@keyframes write-pencil{0%{left:0;opacity:1;transform:rotate(0) translateY(0)}20%{transform:rotate(-10deg) translateY(5px)}40%{transform:rotate(5deg) translateY(-2px)}60%{transform:rotate(-10deg) translateY(3px)}80%{transform:rotate(5deg) translateY(-1px)}90%{opacity:1}to{left:100%;opacity:0;transform:rotate(0) translateY(0)}}.social-links{margin-top:15px;display:flex;justify-content:center;gap:15px}.social-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border:2px solid #2c3e50;border-radius:255px 15px 225px/15px 225px 15px 255px;color:#2c3e50;transition:transform .2s,box-shadow .2s;cursor:pointer;text-decoration:none}.social-btn svg{width:20px;height:20px;fill:currentColor}.social-btn:hover{transform:translateY(-3px) rotate(-5deg);box-shadow:2px 2px #2c3e50;color:#ff6b6b;border-color:#ff6b6b}