.skribbl-container{max-width:900px;height:100%;margin:0 auto;padding:20px;font-family:Nunito,Segoe UI,sans-serif}.skribbl-content{background-color:#f0f9ff;border-radius:16px;flex-direction:column;gap:25px;padding:30px;display:flex;box-shadow:0 10px 25px #0000001a}.skribbl-header{text-align:center;margin-bottom:10px}.skribbl-logo{letter-spacing:-1px;margin-bottom:15px;font-size:48px;font-weight:700;line-height:1}.skribbl-welcome{color:#1e293b;font-size:24px;font-weight:600}.skribbl-title{color:#1e293b;font-size:28px;font-weight:600}.skribbl-avatar-row{justify-content:center;margin:20px 0;display:flex}.skribbl-avatar{color:#333;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;font-size:42px;font-weight:700;display:flex;position:relative;box-shadow:0 4px 8px #0000001a}.skribbl-avatar-eye{background-color:#333;border-radius:50%;width:10px;height:10px;animation:4s infinite blink;position:absolute}.skribbl-avatar-eye-left{top:35px;left:30px}.skribbl-avatar-eye-right{top:35px;right:30px}.skribbl-avatar-mouth{background-color:#333;border-radius:0 0 20px 20px;width:30px;height:10px;position:absolute;bottom:28px}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.skribbl-menu{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.skribbl-menu-column{flex-direction:column;gap:15px;min-width:200px;display:flex}.skribbl-button{cursor:pointer;text-align:center;border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:700;transition:all .2s;box-shadow:0 2px 4px #0000001a}.skribbl-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.skribbl-button:active{transform:translateY(1px);box-shadow:0 1px 2px #0000001a}.skribbl-button-primary{color:#fff;background-color:#3b82f6}.skribbl-button-primary:hover{background-color:#2563eb}.skribbl-button-secondary{color:#fff;background-color:#f59e0b}.skribbl-button-secondary:hover{background-color:#d97706}.skribbl-button-outline{color:#3b82f6;background-color:#0000;border:2px solid #3b82f6}.skribbl-button-outline:hover{background-color:#dbeafe}.skribbl-button-outline-green{color:#10b981;background-color:#0000;border:2px solid #10b981}.skribbl-button-outline-green:hover{background-color:#d1fae5}.skribbl-button-back{color:#4b5563;background-color:#d1d5db;margin-top:10px}.skribbl-button-back:hover{color:#fff;background-color:#9ca3af}.skribbl-how-to-play{background-color:#dbeafe;border-radius:8px;margin-top:20px;padding:15px 25px}.skribbl-how-to-play h3{color:#1e40af;text-align:center;margin-bottom:10px;font-size:20px}.skribbl-how-to-play ol{padding-left:10px;list-style-position:inside}.skribbl-how-to-play li{color:#1e3a8a;margin:8px 0}.public-rooms-list{scrollbar-width:thin;scrollbar-color:#1a3380 #4d7cfe;background-color:#3a5ac9;border-radius:8px;flex-direction:column;gap:12px;max-height:400px;padding:10px;display:flex;overflow-y:auto}.public-rooms-list::-webkit-scrollbar{width:8px}.public-rooms-list::-webkit-scrollbar-track{background-color:#3a5ac9;border-radius:8px}.public-rooms-list::-webkit-scrollbar-thumb{background-color:#1a3380;border:2px solid #3a5ac9;border-radius:8px}.public-rooms-list::-webkit-scrollbar-thumb:hover{background-color:#0a1f4d}.room-item{opacity:0;background-color:#1a3380;border:2px solid #0a1f4d;border-radius:8px;justify-content:space-between;align-items:center;padding:12px 16px;transition:all .3s;display:flex}.room-item:hover{background-color:#254095;border-color:#4d7cfe;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.room-item.fade-in{opacity:1;background-color:#1a3380}.room-info{flex:1}.room-name{color:#fff;margin-bottom:4px;font-size:18px;font-weight:600}.room-details{color:#b8c7e0;gap:12px;font-size:14px;display:flex}.player-count{align-items:center;gap:4px;display:flex}.player-icon{font-size:16px}.room-status{border-radius:4px;padding:2px 8px;font-size:12px;font-weight:500}.room-status.waiting{color:#166534;background-color:#dcfce7}.room-status.in-progress{color:#9a3412;background-color:#ffedd5}.join-room-button{color:#fff;cursor:pointer;background-color:#4ade80;border:none;border-radius:6px;padding:8px 16px;font-weight:600;transition:all .2s}.join-room-button:hover{background-color:#22c55e}.join-room-button.disabled{color:#6b7280;cursor:not-allowed;background-color:#d1d5db}.no-rooms-message{text-align:center;color:#6b7280;padding:40px 20px}.no-rooms-message p:first-child{margin-bottom:8px;font-size:18px}.no-rooms-message p:last-child{color:#9ca3af;font-size:16px}.join-room-form{flex-direction:column;gap:24px;margin-top:20px;display:flex}.form-group{flex-direction:column;gap:10px;display:flex}.room-code-label{color:#4b5563;font-size:16px;font-weight:600}.room-code-input{text-align:center;letter-spacing:4px;color:#1e293b;background-color:#fff;border:2px solid #d1d5db;border-radius:8px;width:100%;padding:12px 16px;font-size:24px;font-weight:700;transition:all .2s;box-shadow:0 2px 4px #0000000d}.room-code-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f640}.room-code-input::placeholder{color:#9ca3af;letter-spacing:2px}.room-code-help{color:#6b7280;text-align:center;font-size:14px}.error-message{color:#b91c1c;background-color:#fee2e2;border-left:4px solid #ef4444;border-radius:6px;padding:12px 16px;font-size:14px;font-weight:500}.button-group{gap:16px;margin-top:12px;display:flex}.button-group button{flex:1}.skribbl-button-disabled{color:#6b7280;cursor:not-allowed;background-color:#d1d5db}@keyframes bounce-once{0%,20%,50%,80%,to{transform:translateY(0)translate(-50%)}40%{transform:translateY(-20px)translate(-50%)}60%{transform:translateY(-10px)translate(-50%)}}.animate-bounce-once{animation:2s forwards bounce-once}